предисловие
CSS3
недавно добавленныйbox-shadow
, использовал для установки тени коробки, поигрался с ней сегодня!
Некоторые эффекты показывают:
Эффект 1 Эффект цветной рамки
Код CSS выглядит следующим образом
div.one div {
width: 100px;
height: 100px;
margin: 50px auto;
background-color: rgb(245, 234, 234);
box-shadow:
10px 0 15px -2px rgb(11, 11, 235),
0 -10px 15px -2px rgb(103, 167, 8),
-10px 0 15px -2px rgb(228, 64, 4),
0 10px 15px -2px rgb(241, 7, 132);
}
div.one div:nth-of-type(1) {
border-radius: 5%;
}
div.one div:nth-of-type(2) {
border-radius: 30%;
}
div.one div:nth-of-type(3) {
border-radius: 50%;
}
Эффект 2 Многогранный эффект
код показывает, как показано ниже
.two div {
width: 80px;
height: 80px;
margin: 50px auto;
background-color: rgb(238, 226, 226);
box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(241, 241, 6), 0 0 0 10px rgb(196, 144, 48) inset, 0 0 10px 20px green inset;
}
.two div:nth-of-type(1) {
border-radius: 5%;
}
.two div:nth-of-type(2) {
border-radius: 30%;
box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(24, 248, 4), 0 0 0 10px rgb(8, 12, 238) inset, 0 0 10px 20px rgb(6, 236, 167) inset;
}
.two div:nth-of-type(3) {
border-radius: 50%;
box-shadow: 0 0 0 10px rgb(3, 233, 41), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(219, 6, 226), 0 0 0 10px rgb(97, 231, 8) inset, 0 0 10px 20px rgb(201, 198, 16) inset;
}
Эффект 3 Эффект внутренней тени
код показывает, как показано ниже
.three div {
width: 200px;
height: 200px;
overflow: hidden;
margin: 100px auto;
}
.three div>img {
height: 200px;
position: relative;
z-index: -1;
}
.three div:nth-of-type(1) {
box-shadow: 0 0 5px 10px rgba(2, 158, 248, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
border-radius: 5%;
}
.three div:nth-of-type(2) {
box-shadow: 0 0 5px 10px rgba(14, 228, 43, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
border-radius: 30%;
}
.three div:nth-of-type(3) {
box-shadow: 0 0 5px 10px rgba(245, 7, 146, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
border-radius: 50%;
}
.three div:nth-of-type(4) {
box-shadow: 0 0 5px 10px rgba(245, 188, 1, 0.5) inset, 0 0 35px rgba(0, 0, 0, .8);
border-radius: 50%;
}
.three div:nth-of-type(5) {
box-shadow: 0 0 5px 10px rgba(252, 116, 5, 0.5) inset, 0 0 50px rgba(0, 0, 0, .8);
border-radius: 50%;
}
Эффект 4 Угловой эффект
код показывает, как показано ниже:
ul.four {
list-style: none;
text-align: center;
font-size: 0;
}
ul.four li {
display: inline-block;
margin: 30px;
width: 480px;
height: 310px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
}
ul.four li div {
width: 100%;
height: 100%;
overflow: hidden;
}
ul.four li::after,
ul.four li::before,
ul.four li div::after,
ul.four li div::before {
content: "";
position: absolute;
width: 120px;
height: 40px;
background: rgb(130, 213, 236);
box-shadow: 0 4px 3px -3px rgba(0, 0, 0, .3);
}
ul.four li::after {
right: -60px;
bottom: -25px;
transform: rotate(135deg);
}
ul.four li::before {
right: -60px;
top: -20px;
transform: rotate(45deg);
}
ul.four li div::after {
left: -60px;
bottom: -25px;
transform: rotate(-135deg);
}
ul.four li div::before {
left: -60px;
top: -20px;
transform: rotate(-45deg);
}
Эффект 5 Эффект искривления наружу
код показывает, как показано ниже:
ul.five {
list-style: none;
text-align: center;
font-size: 0;
display: flex;
}
ul.five li {
display: inline-block;
margin: 30px;
width: 500px;
height: 340px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
}
ul.five li::after,
ul.five li::before {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 3%;
left: 1%;
right: 1%;
box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
transform: skew(0, 5deg);
}
ul.five li::after {
transform: skew(0, -5deg);
}
ul.five li span {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:
linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%)
}
Эффект 6 Эффект искривления внутрь
код показывает, как показано ниже:
ul.six {
list-style: none;
text-align: center;
font-size: 0;
}
ul.six li {
display: inline-block;
margin: 30px;
width: 480px;
height: 312px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
border-radius: 0 0 120px 120px / 0 0 30px 30px;
}
ul.six li::after,
ul.six li::before {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 3%;
left: .5%;
right: .5%;
box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
transform: skew(0, 5deg);
border-radius: 40%;
}
ul.six li::after {
transform: skew(0, -5deg);
}
ul.six li div {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 0 0 120px 120px / 0 0 25px 25px;
position: relative;
}
ul.six li span {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:
linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%);
}
Эффект 7 Эффект изогнутой кромки
код показывает, как показано ниже:
ul.seven {
list-style: none;
text-align: center;
font-size: 0;
}
ul.seven li {
display: inline-block;
margin: 30px;
width: 500px;
height: 330px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
}
ul.seven li::after {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 0;
left: 5%;
right: 5%;
box-shadow: 0 20px 20px rgba(0, 0, 0, .6);
border-radius: 50%;
}
Суммировать
Наконец, чтобы подвести итогbox-shadow
Конкретное использование:
Формат:
box-shadow: 阴影类型 X轴偏移量 Y轴偏移量 阴影边缘模糊 阴影扩展半径 阴影色彩
- Тип тени: включая внутреннюю тень и внешнюю тень, по умолчанию используется внешняя тень, которую можно установить
inset
Внутренняя тень -
X
смещение оси иY
Смещение оси: требуется, используется для указания положения тени, значение может быть положительным или отрицательным. - Размытие края тени: по умолчанию
0
, означает отсутствие размытия, эффект размытия распространяется наружу от края тени и может иметь только положительное значение.Чем больше значение размытия, тем больше область размытия и тем больше общая площадь тени. - Радиус расширения тени: размер тени, по умолчанию
0
(Не расширять), вы можете установить положительное и отрицательное значение, тень положительного значения расширяется, а отрицательная тень уменьшается. - Цвет тени: по умолчанию
currentcolor
END
Окончательный код завершения вложения
Приложение
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阴影特效</title>
<style type="text/css">
body {
background-color: rgb(130, 213, 236);
}
body>* {
display: flex;
justify-self: center;
align-items: center;
flex-wrap: wrap;
}
div.one div {
width: 100px;
height: 100px;
margin: 50px auto;
background-color: rgb(245, 234, 234);
box-shadow:
10px 0 15px -2px rgb(11, 11, 235),
0 -10px 15px -2px rgb(103, 167, 8),
-10px 0 15px -2px rgb(228, 64, 4),
0 10px 15px -2px rgb(241, 7, 132);
}
div.one div:nth-of-type(1) {
border-radius: 5%;
}
div.one div:nth-of-type(2) {
border-radius: 30%;
}
div.one div:nth-of-type(3) {
border-radius: 50%;
}
.two div {
width: 80px;
height: 80px;
margin: 50px auto;
background-color: rgb(238, 226, 226);
box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(241, 241, 6), 0 0 0 10px rgb(196, 144, 48) inset, 0 0 10px 20px green inset;
}
.two div:nth-of-type(1) {
border-radius: 5%;
}
.two div:nth-of-type(2) {
border-radius: 30%;
box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(24, 248, 4), 0 0 0 10px rgb(8, 12, 238) inset, 0 0 10px 20px rgb(6, 236, 167) inset;
}
.two div:nth-of-type(3) {
border-radius: 50%;
box-shadow: 0 0 0 10px rgb(3, 233, 41), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(219, 6, 226), 0 0 0 10px rgb(97, 231, 8) inset, 0 0 10px 20px rgb(201, 198, 16) inset;
}
.three div {
width: 200px;
height: 200px;
overflow: hidden;
margin: 100px auto;
}
.three div>img {
height: 200px;
position: relative;
z-index: -1;
}
.three div:nth-of-type(1) {
box-shadow: 0 0 5px 10px rgba(2, 158, 248, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
border-radius: 5%;
}
.three div:nth-of-type(2) {
box-shadow: 0 0 5px 10px rgba(14, 228, 43, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
border-radius: 30%;
}
.three div:nth-of-type(3) {
box-shadow: 0 0 5px 10px rgba(245, 7, 146, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
border-radius: 50%;
}
.three div:nth-of-type(4) {
box-shadow: 0 0 5px 10px rgba(245, 188, 1, 0.5) inset, 0 0 35px rgba(0, 0, 0, .8);
border-radius: 50%;
}
.three div:nth-of-type(5) {
box-shadow: 0 0 5px 10px rgba(252, 116, 5, 0.5) inset, 0 0 50px rgba(0, 0, 0, .8);
border-radius: 50%;
}
ul.four {
list-style: none;
text-align: center;
font-size: 0;
}
ul.four li {
display: inline-block;
margin: 30px;
width: 480px;
height: 310px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
}
ul.four li div {
width: 100%;
height: 100%;
overflow: hidden;
}
ul.four li::after,
ul.four li::before,
ul.four li div::after,
ul.four li div::before {
content: "";
position: absolute;
width: 120px;
height: 40px;
background: rgb(130, 213, 236);
box-shadow: 0 4px 3px -3px rgba(0, 0, 0, .3);
}
ul.four li::after {
right: -60px;
bottom: -25px;
transform: rotate(135deg);
}
ul.four li::before {
right: -60px;
top: -20px;
transform: rotate(45deg);
}
ul.four li div::after {
left: -60px;
bottom: -25px;
transform: rotate(-135deg);
}
ul.four li div::before {
left: -60px;
top: -20px;
transform: rotate(-45deg);
}
ul.five {
list-style: none;
text-align: center;
font-size: 0;
display: flex;
}
ul.five li {
display: inline-block;
margin: 30px;
width: 500px;
height: 340px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
}
ul.five li::after,
ul.five li::before {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 3%;
left: 1%;
right: 1%;
box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
transform: skew(0, 5deg);
}
ul.five li::after {
transform: skew(0, -5deg);
}
ul.five li span {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:
linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%)
}
ul.six {
list-style: none;
text-align: center;
font-size: 0;
}
ul.six li {
display: inline-block;
margin: 30px;
width: 480px;
height: 312px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
border-radius: 0 0 120px 120px / 0 0 30px 30px;
}
ul.six li::after,
ul.six li::before {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 3%;
left: .5%;
right: .5%;
box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
transform: skew(0, 5deg);
border-radius: 40%;
}
ul.six li::after {
transform: skew(0, -5deg);
}
ul.six li div {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 0 0 120px 120px / 0 0 25px 25px;
position: relative;
}
ul.six li span {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:
linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%);
}
ul.seven {
list-style: none;
text-align: center;
font-size: 0;
}
ul.seven li {
display: inline-block;
margin: 30px;
width: 500px;
height: 330px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
}
ul.seven li::after {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 0;
left: 5%;
right: 5%;
box-shadow: 0 20px 20px rgba(0, 0, 0, .6);
border-radius: 50%;
}
</style>
</head>
<body>
<span>多彩边框</span>
<div class="one">
<div></div>
<div></div>
<div></div>
</div>
<span>多重边框</span>
<div class="two">
<div></div>
<div></div>
<div></div>
</div>
<span>内阴影特效</span>
<div class="three">
<div><img src="./img/0.jpg" /></div>
<div><img src="./img/0.jpg" /></div>
<div><img src="./img/0.jpg" /></div>
<div><img src="./img/0.jpg" /></div>
<div><img src="./img/0.jpg" /></div>
</div>
<h3>折角效果 </h3>
<ul class="four">
<li>
<div><img src="img/1.jpg" /></div>
</li>
<li>
<div><img src="img/2.jpg" /></div>
</li>
</ul>
<h3>外翘边效果 </h3>
<ul class="five">
<li><img src="img/3.jpg" /><span></span></li>
<li><img src="img/3.jpg" /><span></span></li>
<li><img src="img/4.jpg" /><span></span></li>
<li><img src="img/4.jpg" /><span></span></li>
</ul>
<h3>内翘边效果 </h3>
<ul class="six">
<li>
<div><img src="img/5.jpg" /><span></span></div>
</li>
<li>
<div><img src="img/6.jpg" /><span></span></div>
</li>
<li>
<div><img src="img/7.jpg" /><span></span></div>
</li>
<li>
<div><img src="img/7.jpg" /><span></span></div>
</li>
</ul>
<h3>曲边效果 </h3>
<ul class="seven">
<li><img src="img/7.jpg" /></li>
<li><img src="img/7.jpg" /></li>
</ul>
</body>
</html>