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. yii中的cookie的发送和读取

    cookies: //新创建的cookie会从本地传到服务器上,然后从服务器获取. (1) cookie的发送 $cookies = Yii::$app->response->cookie ...

  2. [jquery]折叠指定条件的表格

    最近在做财务报表时候,一些表格要做特定折叠效果 这里通过2个自定义属性来对表格之间的属性作关联 date-head和date-num,输出表格时候,可以按照这2个自定义属性给某些带父子层级关系的内容指 ...

  3. IOS 非ARC开发内存管理的几条规则

    关于ios内存管理.在开发过程中,内存管理很重要,我简单说明一下. 1.正确用法 UIView *v = [[UIView alloc] init]; //分配后引用计数为1 [self.view a ...

  4. myeclipse6.5注册机

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public ...

  5. Java基础之反射和动态代理

    1,反射是依赖于Class对象,然后根据Class对象,去操作该类的资源的.Class对象是发射的基石! 问题1:人这类事物用什么表示?汽车这类事物用什么表示>计算机文件用什么表示?有如此多的事 ...

  6. ASP.NET Core和Angular 2双剑合璧

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:两个还没有正式发布的东西一起用,是什么效果? 效果当然会很好了(我猜的),那么如何在A ...

  7. 在编译命令行中添加 /D_SCL_SECURE_NO_DEPRECATE

    问题:Add the option /D_SCL_SECURE_NO_DEPRECATE to the compilation command 解决方案:项目属性 –> 配置属性 –> C ...

  8. Struts2漏洞利用实例

    Struts2漏洞利用实例 如果存在struts2漏洞的站,administrator权限,但是无法加管理组,内网,shell访问500. 1.struts2 漏洞原理:struts2是一个框架,他在 ...

  9. linq in not in

    class A { public int B { get; set; } public string C { get; set; } } class Program { static void Mai ...

  10. 关于HTML的FORM上传文件问题

    首先,大家可以测试后一段代码 <form id="form1" runat="server"> <input type="file& ...