box-shadow——发现没有发现的角落

简介:

平时,比较喜欢用box-shadow。

今天,才发现原来Box-shadow具有多重阴影效果的功能,啦啦啦~

重新探索下box-shadow未知一面。


1、多重阴影效果

box-shadow可以同时使用多次,来一个四色阴影吧

样式一:

.css-1 {  
    width:100px;  
    height:100px;  
    box-shadow:0px 0px 0px 3px rgb(162,255,151),  
    0px 0px 0px 6px rgb(154,255,252),  
    0px 0px 0px 9px rgb(252,154,193);  
}

样式二:

.css-2{  
    width:100px;  
    height:100px;  
    box-shadow:10px 0 10px rgb(255,255,151),  
    -10px 0 10px rgb(162,255,151),  
    0 10px 10px rgb(154,255,252),  
    0 -10px 10px rgb(252,154,193);  
}

注意是逗号。

2、让ie支持box-shadow

(1)通过滤镜

(2)ie-css3.htc

目录
相关文章
|
前端开发
css3阴影box-shadow
css3阴影box-shadow
|
2月前
|
前端开发 数据可视化 容器
前端基础(十六)_BFC、box-shadow(盒子阴影)、text-shadow(文字阴影)
本文介绍了前端开发中块级格式化上下文(BFC)的概念和作用,以及如何创建BFC。同时,文章还讲解了`box-shadow`和`text-shadow`属性的用法,包括如何为元素添加阴影效果,并通过示例代码展示了这些属性的具体应用。
36 0
前端基础(十六)_BFC、box-shadow(盒子阴影)、text-shadow(文字阴影)
|
2月前
box-shadow属性
box-shadow属性。
112 8
|
Web App开发 iOS开发
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
CSS3 给边框添加阴影 -- box-shadow属性
1060 1
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
|
前端开发
【前端】解决盒子被撑大问题 box-sizing
【前端】解决盒子被撑大问题 box-sizing
113 0
【前端】解决盒子被撑大问题 box-sizing
CSS 04 盒子阴影效果box-shadow
box-shadow: h-shadow v-shadow blur spread color inset h-shadow 必须。水平阴影半径的位置,允许负值 v-shadow 必须。垂直半径阴影 blur 可选,模糊半径设置 color 可选,阴影颜色 inset 可选,内阴影 <div class="ceng rotate_left"> <img src='yjx.jpg' alt=''> <p> 上海鲜花港的郁金香,花名未闻 </p> </div> <div class="ceng rotate_right"> <img
|
前端开发 开发者
怪异盒模型border-box真的“一无是处”吗?
虽然w3c制定了标准盒模型,但在 `box-sizing` 属性中却还是保留了怪异盒模型,可能就是希望开发者在不同的场景中适当地运用,前提是如何理解它。
|
前端开发
css:box-shadow实现单边,多边阴影
css:box-shadow实现单边,多边阴影
226 0
css:box-shadow实现单边,多边阴影
|
前端开发
CSS3中border-radius、box-shadow与gradient那点事儿
border-radius用于添加圆角边框,用处非常广泛。
CSS3中border-radius、box-shadow与gradient那点事儿
|
前端开发
学透CSS-box-shadow你真的会吗?
学透CSS-box-shadow你真的会吗?
学透CSS-box-shadow你真的会吗?