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. mysql事务和锁InnoDB

    背景 MySQL/InnoDB的加锁分析,一直是一个比较困难的话题.我在工作过程中,经常会有同事咨询这方面的问题.同时,微博上也经常会收到MySQL锁相关的私信,让我帮助解决一些死锁的问题.本文,准备 ...

  2. Ubuntu设置环境变量 16.04

    打开终端并输入: sudo gedit /etc/environment. 2 输入用户密码.这时输入的密码是不可见的. 3 如图,在PATH="...."的末尾处添加: :/op ...

  3. javax.validation.ConstraintViolationException---Hibernate后台实体校验

    javax.validation.ConstraintViolationException ... 71 moreCaused by: javax.validation.ConstraintViola ...

  4. Socket通信原理探讨(C++为例)

    一.网络中进程之间如何通信? 本地的进程间通信(IPC)有很多种方式,但可以总结为下面4类: 1.消息传递(管道.FIFO.消息队列) 2.同步(互斥量.条件变量.读写锁.文件和写记录锁.信号量) 3 ...

  5. 1.GoldenGate 简单的一对一配置

    一,软件安装   源端和目标端均执行(只要修改相应的目录)   1.上传软件,放到ogg的安装目录,并解压   mkdir /home/oracle/ogg unzip ogg112101_fbo_g ...

  6. [自动运维]oracle自动备份

    数据是应用的核心部分,程序坏了换台机器重新发布就可以,但数据一旦丢失,造成的损失将不可挽回,程序发布到生产后,数据的备份便显得尤为重要,由于不一定所有的服务均有资金完成高级的备份如RAC和DG,在我们 ...

  7. C# 读本地INI文件方法

    [DllImport("kernel32")]//加载dll private static extern int GetPrivateProfileString(string se ...

  8. 后台拼接input 后，动态获取input的值

    //前台 <input id=" /> //后台 string text = request.form["text"].toString();

  9. iOS 应用内的系统复制粘贴菜单显示的语言非中文

    在应用的 Info.plist 文件中添加以下代码: <key>CFBundleLocalizations</key> <array> <string> ...

  10. Session和Cache的区别

    以前实现数据的缓存有很多种方法,有客户端的Cookie,有服务器端的Session和Application.其中Cookie是保存在客户端的一组数据,主要用来保存用户名等个人信息.Session则保存 ...