CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆

时间：2022-12-29 07:31:43

1、渐变字体

CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆

　　主要是看：-webkit-background-clip: text; 该属性

<style>

        .b1{

          width: 500px;

          height: 200px;

          font-size: 100px;

          background-image: linear-gradient(to bottom, rgb(, , ), rgb(, , ));

          -webkit-background-clip: text;

          color: transparent;

          /* -webkit-text-fill-color: transparent; */

        }

      </style>

    </head>

    <body>

      <div class="b1">

        <div class="b2">测试知否</div>

      </div>

    </body>

2、镂空字体

CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆

　　主要是：-webkit-text-stroke: 3px yellow; 该属性。

.b1{

          width: 500px;

          height: 150px;

          font-size: 100px;

          background-image: linear-gradient(to bottom, rgb(, , ), rgb(, , ));

          /* -webkit-background-clip: text; */

          color: transparent;

          -webkit-text-stroke: 3px yellow;

        }

3、input框提示信息颜色

CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆

<style>

      /* .b1{

        -webkit-text-stroke: 1px yellow;

      } */

      input::-webkit-input-placeholder { color: red; }/* WebKit browsers */

      input:-moz-placeholder { color: red; }/* Mozilla Firefox 4 to 18 */

      input::-moz-placeholder { color: red; }/* Mozilla Firefox 19+ */

      input:-ms-input-placeholder { color: red; }/* Internet Explorer 10+ */

    </style>

  </head>

  <body>

    <input class="b1" type="text" placeholder="测试知否">

  </body>

4、给图片加上内阴影

　　通过 box-shadow 属性可以给DIV增加外阴影，而 inset 这个属性则可以变为内阴影

　　这里有个小技巧通过给图片设置相对定位并给上叠层顺序为 -1 就可以实现图片内阴影

CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆

<style>

      .b1{

        box-shadow:inset   30px #FF1493;

        display:inline-block;

      }

      img{

        position: relative;

        display: block;

        z-index: -;

      }

    </style>

  </head>

  <body>

    <div class="b1">

      <img src="./ly.png" width="100px">

    </div>

  </body>

5、3/4圆

　　其实3/4圆弧可以用一句css就能解决，border-left:2px solid transparent; 绘出圆后，将一侧边框设置为透明即可搞定

#cir{

    width: 100px;

    height: 100px;

    border: 2px solid red;

    border-radius: %;

    border-left: 2px solid transparent;

    transform: rotate(45deg);

}

CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆的更多相关文章

  1. input 框提示信息

    给input添加提示信息,只需添加 “placeholder”的class,将提示信息放在value中, 其中“placeholder”的名字是随便取的,不是H5的“placeholder”属性 例子 ...

  2. 四、Input框改placeholder中字体的颜色

    Input框改placeholder中字体的颜色 input::-webkit-input-placeholder { color: #ccc; font-size: 12px; }

  3. 解决input框中加入disabled&equals;"disabled"之后，改变字体的颜色（默认的是灰色）

    在input框中加入disabled="disabled"之后,字体默认的就变成灰色了 解决方案 input[disabled]{color:#fff;opacity:1} dis ...

  4. css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

     壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...

  5. 我给女朋友讲编程CSS系列&lpar;3&rpar; CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体

    一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...

  6. DIV&plus;CSS&plus;JS实现色彩渐变字体

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 【CSS】input 框的一些事情

    1.input框光标太长与不居中的问题 如果input框height:40px 为了字体垂直居中line-height也设为40px 问题来了,这样光标在刚刚focus时候是占据整个input框并且输 ...

  8. CSS基本知识6-CSS字体

    首先要考虑的是文本的排版,实际上有这玩意,Word还需要吗?不需要了.我们列下文本所涉及的操作: CSS 文本属性 属性 描述 color 设置文本颜色 direction 设置文本方向. line- ...

  9. CSS 让 fontawesome 图标字体变细

    一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...

随机推荐

  1. Install Sogou IM 2&period;0 in Ubuntu14&period;04&plus;&sol;Xfce

    Ubuntu14.04+ 安装搜狗输入法 搜狗输入法是一款非常友好的输入法产品,从Ubuntu14.04开始对Linux支持,不过只是Debian系的,是Ubuntu优麒麟组引入的.优麒麟是针对国人设 ...

  2. Unity3D自定义地形的笔刷&comma;刷出别样地形

    ​ 是不是很简单呀,大家可以发挥想象刷出特殊的地形,小鸡呀,或者其他的logo之类(顶视图看上去效果很棒)的地形. 最后把我找的笔刷上传,Gizmos 注意: 如果文件夹及图片导入后,地形系统的笔刷无 ...

  3. LeetCode&lpar;32&rpar;-Binary Tree Level Order Traversal

    题目: LeetCode Premium Subscription Problems Pick One Mock Articles Discuss Book fengsehng 102. Binary ...

  4. c&num;图片裁剪

    c#文件裁剪 Bitmap newbm = new Bitmap(nowWidth, nowHeight); Graphics g = Graphics.FromImage(newbm); g.Int ...

  5. Node辅助工具NPM&amp&semi;REPL

    Node辅助工具NPM&REPL NPM和REPL是node的包管理器和交互式解析器,可以有效提高开发者效率 NPM npm(Node Package Manager)是node包管理器,完全 ...

  6. python测试开发django-45&period;xadmin添加小组件报错解决

    前言 xadmin首页上有个添加小组件按钮,打开的时候会报错"render() got an unexpected keyword argument 'renderer'" 环境: ...

  7. GBDT&lpar;Gradient Boosting Decision Tree&rpar; 没有实现仅仅有原理

                阿弥陀佛.好久没写文章,实在是受不了了.特来填坑,近期实习了(ting)解(shuo)到(le)非常多工业界经常使用的算法.诸如GBDT,CRF,topic model的一些算 ...

  8. &lbrack;坑况&rsqb;——webpack搭建前端环境踩过的坑啊

    前言 嘿哈,webpack搭建前端环境踩过的坑啊! 第一个:完全不知所措 webpack4 下面用不了HtmlWebpackPlugin 和 ExtractTextPlugin 解决方案: html- ...

  9. Effective STL 学习笔记 Item 18： 慎用 vector&lt&semi;bool&gt&semi;

    vector<bool> 看起来像是一个存放布尔变量的容器,但是其实本身其实并不是一个容器,它里面存放的对象也不是布尔变量,这一点在 GCC 源码中 vector<bool> ...

  10. spring----spring中的注解&commat;service等的作用

    service  是有用的相当于 xml配置中得bean  id = service  也可以不指定 不指定相当于 bean id =  com. service.service 就是这个类的全限定名 ...

相关文章