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. Fitbit Flex

    Fitbit Flex 使用 7月4日,收到了在美国亚马逊上海淘的Fitbit Flex.首先谈谈这价格,在美国亚马逊上购买时的价格是98美元,下订单过后没几天,京东开始首发出售,价格定在898元.相 ...

  2. .NET 委托

    委托类型定义      C#编译器处理委托时,先自动产生一个派生自System.MulticastDelegate的密封类.这个类与它的基类System.Delegate一起为委托提供必要的基础设施, ...

  3. .NET LINQ 限定符操作

    限定符操作      限定符运算返回一个 Boolean 值,该值指示序列中是否有一些元素满足条件或是否所有元素都满足条件. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表 ...

  4. 【笔记】cookies管理工具类

    package com.ulearning.ulms.util; import java.io.UnsupportedEncodingException; import java.net.URLDec ...

  5. button按钮

    button按钮只加类名不加type时,点击此按钮页面会刷新

  6. CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  7. sql server存储过程分页，行变列

    CREATE PROCEDURE [dbo].[PROC_GetPriviousAndNextDetailContent]@Index varchar(20),--表主键@Table varchar( ...

  8. 无法从“char*转换为“LPCWSTR”

    解决办法: 第一种方法:工程属性->配置属性->右边 项目默认值->字符集 改为未设置 第二种:一般直接加个L在前面,当是字符串常量的时候可以这样,也可以_T(x)等   来自:软件 ...

  9. HDU 4686 Arc of Dream(快速幂矩阵)

    题目链接 再水一发,构造啊,初始化啊...wa很多次啊.. #include <cstring> #include <cstdio> #include <string&g ...

  10. 解决Winform应用程序中窗体背景闪烁的问题

    本文转载:https://my.oschina.net/Tsybius2014/blog/659742 我的操作系统是Win7,使用的VS版本是VS2012,文中的代码都是C#代码. 这几天遇到一个问 ...