CSS3實(shí)現(xiàn)曲線陰影和翹邊陰影
發(fā)布時(shí)間：2016-05-03 16:38:10 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)曲線陰影和翹邊陰影的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了CSS3實(shí)現(xiàn)曲線陰影和翹邊陰影的效果，原來(lái)不用ps技術(shù)也可以實(shí)現(xiàn)陰影效果，很棒的效果，供大家參考，具體內(nèi)容如下
效果圖如下：
index.html
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS3實(shí)現(xiàn)曲線陰影和翹邊陰影</title>
- <style>
- /*源于imooc的學(xué)習(xí)*/
- body {
- font-family: "微軟雅黑", "Microsoft YaHei";
- font-size: 20px;
- }
- body, ul, li, h1 {
- padding: 0;
- margin: 0;
- }
- ul {
- list-style: none outside none;
- }
- .wrap {
- width: 70%;
- height: 200px;
- margin: 50px auto;
- background-color: #fff;
- }
- .wrap h1 {
- font-size: 40px;
- text-align: center;
- line-height: 200px;
- }
- /**
- * box-shadow
- * 功能：添加一個(gè)或多個(gè)陰影
- * 語(yǔ)法：box-shadow: h-shadow v-shadow blur spread color inset;
- * 參數(shù)：
- * h-shadow（必需）：水平陰影的位置。允許負(fù)值。
- * v-shadow（必需）：垂直陰影的位置。允許負(fù)值。
- * blur（可選）：模糊程度，值越大越模糊。
- * spread（可選）：陰影的尺寸。一般不推薦設(shè)置。
- * color（可選）：陰影的顏色。請(qǐng)參閱CSS顏色值。
- * inset（可選）：將外部陰影（outset）改為內(nèi)部陰影。
- * 瀏覽器兼容：
- * IE9+、Firefox 4、Chrome、Opera以及Safari 5.1.1支持box-shadow屬性。
- */
- .effect {
- position: relative;
- /*box-shadow: h-shadow v-shadow blur color [inset];*/
- -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
- -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
- -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
- }
- /**
- * :after選擇器：在被選元素的內(nèi)容后面插入內(nèi)容
- * :before選擇器：在備選元素額內(nèi)容后面插入內(nèi)容
- * 說(shuō)明：需要使用content屬性來(lái)指定要插入的內(nèi)容
- * 瀏覽器兼容：
- * 對(duì)于IE8及更早版本的:after，必須聲明<!DOCTYPE>。
- *
- * content屬性用于定義元素之前或之后放置的生成內(nèi)容。默認(rèn)地，這往往是行內(nèi)內(nèi)容，不過該內(nèi)容創(chuàng)建的
- * 框類型可以用屬性display控制。
- */
- .effect::after,.effect::before {
- content: '';
- background: #f00;
- position: absolute;
- top: 50%;
- bottom: 0;
- left: 20px;
- right: 20px;
- -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
- -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
- -o-box-shadow: 0 0 20px rgba(0,0,0,0.8);
- box-shadow: 0 0 20px rgba(0,0,0,0.8);
- border-radius: 100px/10px; /*水平半徑/垂直半徑*/
- z-index: -1;
- }
- .box {
- width: 980px;
- height: auto;
- clear: both;
- overflow: hidden;
- margin: 20px auto;
- }
- .box li {
- width: 300px;
- height: 210px;
- float: left;
- margin: 20px 10px;
- border: 2px solid #EFEFEF;
- -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;
- -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;
- -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;
- box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;
- position: relative;
- background-color: #FFF;
- }
- .box li img {
- display: block;
- width: 290px;
- height: 200px;
- margin: 5px;
- }
- .box li:before {
- content: '';
- position: absolute;
- width: 90%;
- height: 80%;
- left: 20px;
- bottom: 8px;
- /*background-color: #F00;*/
- background-color: transparent;
- box-shadow: 0 8px 20px rgba(0,0,0,0.6);
- -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
- -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
- -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
- /**
- * transform
- * 功能：向元素應(yīng)用2D或3D轉(zhuǎn)換
- * 語(yǔ)法：transform: none|transform-functions
- * 參數(shù)：
- * skew(x-angle,y-angle) 定義沿著X和Y軸的2D傾斜轉(zhuǎn)換
- * skewX(angle) 定義沿著X軸的2D傾斜轉(zhuǎn)換。
- * skewY(angle) 定義沿著y軸的2D傾斜轉(zhuǎn)換。
- * 瀏覽器兼容：
- * Internet Explorer 9支持替代的-ms-transform屬性（僅適用于2D轉(zhuǎn)換）
- * Safari和Chrome支持替代的-webkit-transform屬性（3D和2D轉(zhuǎn)換）
- * Opera只支持2D轉(zhuǎn)換。
- */
- -webkit-transform: skewX(-11deg) rotate(-4deg);
- -moz-transform: skewX(-11deg) rotate(-4deg);
- -ms-transform: skewX(-11deg) rotate(-4deg);
- -o-transform: skewX(-11deg) rotate(-4deg);
- transform: skewX(-11deg) rotate(-4deg);
- z-index: -1;
- }
- .box li:after {
- content: '';
- position: absolute;
- width: 90%;
- height: 80%;
- right: 20px;
- bottom: 8px;
- background-color: transparent;
- box-shadow: 0 8px 20px rgba(0,0,0,0.6);
- -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
- -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
- -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
- -webkit-transform: skewX(11deg) rotate(4deg);
- -moz-transform: skewX(11deg) rotate(4deg);
- -ms-transform: skewX(11deg) rotate(4deg);
- -o-transform: skewX(11deg) rotate(4deg);
- transform: skewX(11deg) rotate(4deg);
- z-index: -1;
- }
- </style>
- </head>
- <body>
- <div class="wrap effect">
- <h1>Shadow Effect</h1>
- </div>
- <ul class="box">
- <li><img src="images/1.jpg" alt="1.jpg"></li>
- <li><img src="images/2.jpg" alt="2.jpg"></li>
- <li><img src="images/3.jpg" alt="3.jpg"></li>
- </ul>
- </body>
- </html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
css box-shadow實(shí)現(xiàn)曲邊陰影與翹邊陰影
這篇文章主要介紹了css box-shadow實(shí)現(xiàn)曲邊陰影與翹邊陰影,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-09-05
這篇文章主要介紹了CSS 翹邊陰影的實(shí)現(xiàn)代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-06-15
