1、渐变字体

　　主要是看：-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、镂空字体

　　主要是：-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框提示信息颜色

<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 就可以实现图片内阴影

<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. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

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

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

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

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

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

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

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

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

  7. DIV+CSS+JS实现色彩渐变字体

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

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

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

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

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

随机推荐

  1. Bzoj3677:树形DP

    首先我们知道这棵树的形态,一眼DP.考虑蓝线的性质,显然蓝线在树上是连接连续三个节点的.这样就有三种情况:连接 一个节点 的 某个孩子->本身->父亲 或者 一个孩子->本身-> ...

  2. mysql的checkpoint

    上一章的结尾我们留下了一个问题,就是在上一章所介绍的模型中,恢复管理器必须要通过全篇扫描整个undolog进行日志恢复,这样做显然是没有太大必要的,因为系统中断肯定是在最后几个事务受到影响,前面的事务 ...

  3. KVM源代码解读：linux-3.17.4\include\uapi\linux\kvm.h

    #ifndef __LINUX_KVM_H #define __LINUX_KVM_H /* * Userspace interface for /dev/kvm - kernel based vir ...

  4. 查看APP的下载量

    开发者账号登陆后:→用户中心→iTunes Connect→Sales Trend

  5. HDU 5842 Lweb and String 水题

    Lweb and String 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5842 Description Lweb has a string S ...

  6. qunar-dns

    去哪儿QInfra大会 IT大咖说 - 大咖干货,不再错过   http://www.itdks.com/eventlist/detail/1313

  7. LPC43xx SGPIO Slice 示意图

    SGPIO inverted clock qualifier Hi, With bits 6:5 of SGPIO_MUX_CFG the QUALIFIER_MODE is selected (0x ...

  8. Project 03- STM32F4xx PID controller

    Project 03- STM32F4xx PID controller CMSIS files from ARM provides ARM Math functions. There are als ...

  9. 华为机试正式版（西安c/c++/java），今天下午去机试的题目，新奇出炉了！

    下面题目都是回顾的.题目都非常easy, 大家有些基础就能够參加!(语言能够是c/c++.也能够是java的) 题目一(60分): 字符串操作. 将小写转换成大写, 将大写转化为小写, 数字的不做转换 ...

  10. 在busybox里使用ulimit命令

    刚才想使用ulimit修改用户进程的用户栈的大小,发现busybox里没有这个命令,上google搜索得到如下解释: "ulimit" is a shell builtin, me ...