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. ubuntu 创建用户

    http://www.jb51.net/article/45848.htm  创建用户

  2. Linux服务器模型及其对应的程序流程

    一.TCP循环服务器 TCP循环服务器一次只能处理一个客户端的请求,处理完成后,才能接受下一个客户端的请求,程序流程如下: socket(......);//创建套接字 bind(......);// ...

  3. LNMP平台搭建---MySQL安装篇

    在前两篇中,安装了一个基本的Web服务器,但是只能提供静态网页查看,要做成动态网站,就必须要数据库或其他编程语言支持了,这里先介绍MySQL数据库的安装. MySQL是一个开源的数据库,在互联网行业应 ...

  4. 支付宝通知页面notify_url、返回页面return_url

     返回页面(return_url文件)工作原理 即:商户系统请求/支付宝响应交互模式 1. 构造请求数据 商户通过提供的接口代码示例,通过代码示例的规则,程序构造与运算得到sign加密结果以及构造后的 ...

  5. PullToRefreshListView相关

    PullToRefresh使用详解(四)--利用回调函数实现到底加载   链接

  6. 2012 Multi-University #9

    计算几何 A Farmer Greedy 题意:n个点选3个组成三角形,问m个点在三角形内的数字是奇数的这样的三角形个数． 分析:暴力O(N^3*M)竟然能过!我写的搓,加了优化才过掉．正解是先处理出 ...

  7. React的双向绑定

    以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式.有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略...) 不用插件: 先创建 ...

  8. Leetcode N-Queens

    The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...

  9. 【BZOJ】3523: [Poi2014]Bricks

    题意 \(n(n \le 1000000)\)个物品,颜色分别为\(a[i]\),现在要求排在一排使得相邻两个砖块的颜色不同,且限定第一个砖块和最后一个砖块的颜色,输出一个合法解否则输出-1. 分析 ...

  10. pod 安装总结

    参考http://code4app.com/article/cocoapods-install-usage http://www.jianshu.com/p/32d9cfb91471 原文:http: ...