溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS3中怎么實現曲線陰影和翹邊陰影效果，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3實現曲線陰影和翹邊陰影</title>
<style>
/*源于imooc的學習*/
body {
font-family: "微軟雅黑", "Microsoft YaHei";
font-size: 20px;
}
body, ul, li, h2 {
padding: 0;
margin: 0;
}
ul {
list-style: none outside none;
}
.wrap {
width: 70%;
height: 200px;
margin: 50px auto;
background-color: #fff;
}
.wrap h2 {
font-size: 40px;
text-align: center;
line-height: 200px;
}
/**
* box-shadow
* 功能：添加一個或多個陰影
* 語法：box-shadow: h-shadow v-shadow blur spread color inset;
* 參數：
* h-shadow（必需）：水平陰影的位置。允許負值。
* v-shadow（必需）：垂直陰影的位置。允許負值。
* blur（可選）：模糊程度，值越大越模糊。
* spread（可選）：陰影的尺寸。一般不推薦設置。
* color（可選）：陰影的顏色。請參閱CSS顏色值。
* inset（可選）：將外部陰影（outset）改為內部陰影。
* 瀏覽器兼容：
* 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選擇器：在被選元素的內容后面插入內容
* :before選擇器：在備選元素額內容后面插入內容
* 說明：需要使用content屬性來指定要插入的內容
* 瀏覽器兼容：
* 對于IE8及更早版本的:after，必須聲明<!DOCTYPE>。
*
* content屬性用于定義元素之前或之后放置的生成內容。默認地，這往往是行內內容，不過該內容創建的
* 框類型可以用屬性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
* 功能：向元素應用2D或3D轉換
* 語法：transform: none|transform-functions
* 參數：
* skew(x-angle,y-angle) 定義沿著X和Y軸的2D傾斜轉換
* skewX(angle) 定義沿著X軸的2D傾斜轉換。
* skewY(angle) 定義沿著y軸的2D傾斜轉換。
* 瀏覽器兼容：
* Internet Explorer 9支持替代的-ms-transform屬性（僅適用于2D轉換）
* Safari和Chrome支持替代的-webkit-transform屬性（3D和2D轉換）
* Opera只支持2D轉換。
*/
-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">
<h2>Shadow Effect</h2>
</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>
關于CSS3中怎么實現曲線陰影和翹邊陰影效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
