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. codevs 水过 骑马修栅栏

    [问题描述] 农民John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个一个栅栏.你必须编一个程序,读入栅 ...

  2. BZOJ.1031.[JSOI2007]字符加密(后缀数组)

    题目链接 环可以拆成链:对字符串排序能想到后缀数组. 完了.输出时忽略长度不足n的串,输出s[sa[i]+n-1],即排名为i的字符串的末尾. //4140kb 744ms #include < ...

  3. @Transactional导致AbstractRoutingDataSource动态数据源无法切换的解决办法

    上午花了大半天排查一个多数据源主从切换的问题,记录一下: 背景: 项目的数据库采用了读写分离多数据源,采用AOP进行拦截,利用ThreadLocal及AbstractRoutingDataSource ...

  4. Go内置库模块 flag

    import "flag" flag包实现了命令行参数的解析.每个参数认为一条记录,根据实际进行定义,到一个set集合.每条都有各自的状态参数. 在使用flag时正常流程: 1.  ...

  5. delphi 实现文件上传下载

    unit UpDownFile; interface uses Windows, Classes, Idhttp, URLMon, IdMultipartFormData; const UpUrl = ...

  6. 下载企业级证书打包的app 出现“正在下载”或“等待中”的图标并且无法删除的问题

    下载企业级证书打包的app 出现“正在下载”或“等待中”的图标并且无法删除的问题: 原因分析:手机上的bundleid 与后台plist文件中的bundleid不一致导致的. 解决方案:用plist文 ...

  7. MEF and AppDomain z

    MEF and AppDomain - Remove Assemblies On The Fly This article will give an idea of what's involved i ...

  8. Linux的命名空间详解--Linux进程的管理与调度（二）

    转自:http://blog.csdn.net/gatieme/article/details/51383322 日期 内核版本 架构 作者 GitHub CSDN 2016-05-12 Linux- ...

  9. Unity3d-Particle System系统的学习（一）

    最近看了下Unity3d的粒子系统的相关视频,并且动手操作了下,感觉自己的美工技能又增进了下(开个小玩笑),发现粒子系统所需要记忆的东西还是有点多的. 所以为了不让自己遗忘某些知识点,我准备发布成博客 ...

  10. linux的systemctl 命令用法 转

    目录 预热 管理单个 unit 查看系统上的 unit 管理不同的操作环境(target unit) 检查 unit 之间的依赖性 相关的目录和文件 systemctl daemon-reload 子 ...