读《CSS.Secrets》,记录下——box-shadow,outline
来源:互联网 发布:ipadair2下载不了软件 编辑:程序博客网 时间:2024/05/18 00:47
首先,要感谢CSS一姐——Lea Verou,感谢写了这样的一本书,为推广CSS3新属性所做出的努力。
这本书我刚开了个头,得来不易。看到了outline这个属性在一姐的“调教”下各种骚浪,挺过瘾的。怕忘了,记录下,也是跟大家分享下。
先介绍个有趣的,box-shadow。
代码片:
.box-shadow { margin: 100px auto 0; width: 100px;height: 100px;background: yellowgreen; box-shadow: 0 0 0 10px #333333,0 0 0 15px #0aa,0 5px 5px 20px rgba(0,0,0,.5); }<div class="box-shadow">
然后会出现这样的效果:
是的,你没看错!这出现了跟border:solid;一样的效果。
区别在于:
- 阴影不影响布局,如果用border属性来写,那么div盒模型的width就得改变,肯定会影响布局的。
- 需要注意的是,阴影是不触发鼠标的hover,click,而border可以。
- box-shadow可以定义若干个,而border与outline至多只能各定义一个。
好了。我们来看看outline。
传统印象中,outline是用于外边框的,可以把一整个div盒模型包进去。
来看看Lea Verou是怎么认为的。
代码片:
.box-outline{ margin: 100px auto 0; width: 100px;height: 100px; background: yellowgreen; border: 10px solid #333333; outline: 5px solid #0aa; }<div class="box-shadow">
很好,这样用outline可以实现之前的效果。
别在意,看着瘦小些,只是没有阴影而已,像素是一样的。
好了,这里的outline在W3C手册里说,outline-offset不可为负值。
请看下面:
代码片:
.outline { width: 200px; height: 200px; margin: 0 auto;background: black; border: solid 3px yellowgreen; outline: 1px dashed #00cfdd; outline-offset: -15px; }<div class="outline"></div>
丢在chrome里,能看到的是:
哦唷,outline跑到element里面去嘞!outline-offset: -15px;
负值赋予了outline一个新的境界。
有得必有失,有一些小限制:
- 这只在两个“border”里起作用。即outline是不可以定义若干个的
- outline不兼容圆角属性。
分享到此,若有错,请指出,谢谢。
0 0
- 读《CSS.Secrets》,记录下——box-shadow,outline
- CSS并不简单--走进border、box-shadow和outline
- box-shadow实现outline圆角
- 关于box—shadow
- 标签—box-shadow
- css元素边框发光效果——box-shadow
- CSS box shadow IE6+
- CSS Box Shadow
- CSS之box-shadow
- CSS box-shadow
- CSS box-shadow
- CSS中box-shadow、text-shadow用法
- css3中的outline,box-shadow和user-select总结
- css box-shadow ie6-8
- css box-shadow效果演示
- 探究CSS box-shadow属性
- CSS学习笔记:box-shadow
- CSS 单边 inner box shadow
- 华为2016实习生招聘笔试题第三题--和尚挑水
- 三位数乘一位数
- vb中的乘法运算
- 三位数乘以一位数
- http的get和post请求
- 读《CSS.Secrets》,记录下——box-shadow,outline
- 两位数乘一位数
- SourceTree里GitFlow的使用
- 多位数乘一位数
- 唱衰平板何以成风?坚守品质乃长胜之道
- USACO-Section 4.3 Letter Game (枚举)
- Hiveserver2 HA高可用
- OpenCV坐标体系+minMaxLoc的使用细节
- POJ 1523 Tarjan求割点