css 揭秘之css coding tips

demo（1）

html 代码：

<body>

    <section>

        <div class="demo1"></div>

    </section>

</body>

　

css 代码：

.demo1{

　　width: 100px;

　　height: 100px;

　　padding: 6px 16px;

　　border-image-repeat: 1px solid #444d88;

　　background: red linear-gradient(red,white);

　　border-radius: 4px;

　　box-shadow: 0 1px 5px gray;

　　color: white;

}

　　

效果图：

总结：

css3 标签 linear-gradient 背景线性渐变

先解释一下这个标签，linear-gradient

/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */

background: -prefix-linear-zgradient(top, blue, white); 

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */

background: linear-gradient(to bottom, blue, white);
更多的描述可以参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients

[css 揭秘]-css coding tips的更多相关文章

  1. 《CSS揭秘》笔记（一）

    前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...

  2. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  3. 《css揭秘》

    <css揭秘> 第一章:引言 引言 案例们 第二章:背景与边框 背景和边框 半透明边框(rgba/hsla.background-clip) 多重边框(box-shadow) 灵活的背景定 ...

  4. [css 揭秘]：CSS揭秘 技巧（三）：背景定位

    我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...

  5. CSS揭秘 技巧（五）：条纹背景

    条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...

  6. [css 揭秘]：CSS揭秘 技巧（四）：边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...

  7. [css 揭秘]：CSS揭秘 技巧（二）：多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

  8. [css 揭秘]：CSS揭秘 技巧（一）：半透明边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...

  9. [css 揭秘]：CSS编码技巧

    CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...

随机推荐

  1. 2014 39th ACM-ICPC 西安赛区 总结

    西安,打铁. 出发前听说是大赛区,签到的时候看了秩序册的队伍情况,264支队伍. 在听说是大赛区之前,我觉得我们队应该是银首,运气好+发挥超常的话或许有金,即保银冲金. 听到大赛区之后,觉得可能金区有 ...

  2. PHP上传文件示例

    虽然大多数人认为Web只包含网页,但HTTP协议实际上可以传输任何文件,如office文档.PDF.可执行文件.AVI.压缩文件及各种其他文件类型.虽然FTP在历史上一直是向服务器上传文件的标准方式, ...

  3. 以前用SQL实现的机构职能树，再看看

    DECLARE CNT NUMBER; TMP ); vtmp ); ltmp1 ); ltmp2 ); ltmp3 ); ltmp4 ); NTMP NUMBER; CURSOR CSR_TEST ...

  4. Power BI for Office 365（五）Power View第二部分

    继续上一篇Power View 报表的创建, Anna觉得为每一个大类创建一张单独的报表似乎很不现实,所以她决定按照另外一种方式来设计报表,从而满足最终用户想要查看不同大类下的数据的要求. 于是Ann ...

  5. JAVA Day10

      使用继承 编写继承: class Engineer{ //公共的属性和方法 }   编写子类,继承父类, class SoftEnineer extends Enginerr{ //子类持有的属性 ...

  6. response.sendRedirect()与request.getRequestDispatcher().forward()区别

    Servlet中response.sendRedirect()与request.getRequestDispatcher().forward(request,response)这两个对象都可以使页面跳 ...

  7. gulp自动化构建

    最近正在使用gulp去帮我自动化构建一些技术块,感觉很爽,所以把gulp操作步骤给写笔记,记录下来... 首先了解什么是gulp? 我的理解是一个工具并且自动化的,能帮你把一些前端技术的语法转换成当前 ...

  8. 【改】iOS学习之键盘类型UIKeyboardType

    关于 UITextField 的键盘是可以自定义的,正好在一个代码用这个,就总结一下. 在 UITextField 中有一个 keyboardType 属性,它的类型是一个枚举值,下面就是枚举值和对应 ...

  9. 【BZOJ】3427: Poi2013 Bytecomputer

    题意: 给定一个长度为\(n\)的\(\{-1, 0, 1\}\)组成的序列,你可以进行\(x_i=x_i+x_{i-1}\)这样的操作,求最少操作次数使其变成不降序列.(\(n \le 100000 ...

  10. ZeroMQ接口函数之 ：zmq_connect - 由一个socket创建一个对外连接

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_connect zmq_connect(3)  ØMQ Manual - ØMQ/3.2.5 Name zmq_c ...