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. 设置java.library.path的值（Mac/Linux/Windows）

    说明:网上基本针对这个值的设置分为两面,Windows派和Linux派,Windows的不说,Linux下只会说设置LD_LIBRARY_PATH即可,但这种方式在Java 8是一个错误的设置,尤其是 ...

  2. Java clone() 浅克隆与深度克隆(转)

    以下文字转自:桔子园 http://www.blogjava.net/orangelizq/archive/2007/10/17/153573.html 现在Clone已经不是一个新鲜词语了,伴随着“ ...

  3. linux socket编程示例

    #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include &l ...

  4. Day14 自己定义泛型类的使用

    泛型的引入和体现: 问题:集合中能够存储各种类型的元素,可是由于集合能够存储各种类型数据.在获取集合中元素时,就会造成数据不安全. public class GenericDemo { public ...

  5. C#内存映射文件消息队列实战演练(MMF—MQ)

    一.课程介绍 本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理和 ...

  6. Linux学习2-在阿里云服务器上部署禅道环境

    前言 以前出去面试总会被问到:测试环境怎么搭建?刚工作1-2年不会搭建测试环境还可以原谅自己,工作3-5年后如果还是对测试环境搭建一无所知,面试官会一脸的鄙视. 本篇以最简单的禅道环境搭建为例,学习下 ...

  7. 不规则形状的Mask动画

    不规则形状的Mask动画 效果 源码 https://github.com/YouXianMing/Animations // // MaskShapeViewController.m // Anim ...

  8. NSObject的hash方法

    NSObject的hash方法 说明 本示例仅仅演示一个对象什么时候执行hash方法. 细节 1. 必要的Model类,重载了hash方法用以反映Hash方法是否被调用了 2. 测试 // // Vi ...

  9. Cocos2d-x V2.x版本对64bit的支持

    2015年2月1日后新提交的应用必须要支持64位架构. 我所使用的是cocos2d-x V2.0版本,而且源码有部分代码是修改过的.好在cocos2d-x官方已经放出了一个支持64位的2.2.6版本, ...

  10. Mac环境配置 － iOS开发人员 -待续

    Mac环境记录 Mac 相关 目录相关 显示: $ defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏: $ default ...