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. SPOJ.1812.LCS2(后缀自动机)

    题目链接 \(Description\) 求最多10个串的LCS(最长公共子序列). \(Solution\) 类比上题,对一个串建SAM,我们可以逐串地求出其在每个节点所能匹配的最大长度mx[i]. ...

  2. [CEOI2017]Palindromic Partitions

    [CEOI2017]Palindromic Partitions 题目大意: 给出一个长度为\(n(n\le10^6)\)的只包含小写字母字符串,要求你将它划分成尽可能多的小块,使得这些小块构成回文串 ...

  3. ASP.NET Core 中的框架级依赖注入

    https://tech.io/playgrounds/5040/framework-level-dependency-injection-with-asp-net-core 作者: Gunnar P ...

  4. 使用 IntraWeb (20) - 基本控件之 TIWGrid

    TIWGrid 最终通过 Html Table 呈现; 其每个 Cell 都是一个 TIWGridCell 对象, Cell 对象的 Control 属性非常好, 可以非常方便地嵌入其他控件. TIW ...

  5. 面向企业级的开源WebGIS解决方案--MapGuide（对比分析）

    在技术特点.功能.架构等方面,MapGuide与其他WebGIS产品有什么区别?本文主要从此角度来介绍MapGuide的特性,以供参考.    本人选择了比较熟悉的几款WebGIS产品:MapServ ...

  6. Java怎样处理EXCEL的读取

    须要包:poi-3.5.jar.poi-ooxml-3.5.jar 实例: [java] view plaincopy public class ProcessExcel { private Work ...

  7. Lex与Yacc学习

    http://www.cnblogs.com/shine-yr/p/5214976.html

  8. Revit API修改链接文件房间边界

    start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] );//设置房间边界     ...

  9. 新版ADT创建项目时出现appcompat_v7的问题

    做Android开发的朋友最近会发现,更新ADT至22.6.0版本之后,创建新的安装项目,会出现appcompat_v7的内容.并且是创建一个新的内容就会出现.这到底是怎么回事呢?原来appcompa ...

  10. UINavigationController 、UINavigationBar 、UINavigationItem 超清晰直观详解

    UINavigationController 部分 1. UINavigationController 是一个容器类.里面盛放的是UIViewController. 容器的意思是,如果你不放入UIVi ...