盒子模型-第六章

么是盒子模型？

盒子模型如图所示

1、边框：

border-color

border-width

border-style

属性说明示例

border-top-color 上边框颜色border-top-color:#369;

border-right-color右边框颜色border-right-color:#369;

border-bottom-color下边框颜色border-bottom-color:#fae45b;

border-left-color左边框颜色border-left-color:#efcd56;

border-color四个边框为同一颜色border-color:#eeff34;

上、下边框颜色：#369

左、右边框颜色：#000border-color:#369 #000;

上边框颜色：#369

左、右边框颜色：#000

下边框颜色：#f00border-color:#369 #000 #f00;

上、右、下、左边框颜色：

#369、#000、#f00、#00fborder-color:#369 #000 #f00 #00f;

边框粗细：border-width

thin；

medium；

thick；

像素值；

边框样式： border-style

none;

hidden;

dotted;

dashed;

solid;

double;

border的简写：

border:1px solid #3a6587;

border: 1px dashed red;

2、外边距：margin

margin-top；

margin-right；

margin-bottom；

margin-left；

网页居中对齐：margin:0px auto;

网页居中对齐的必要条件：块元素、固定宽度

3、内边距：padding

padding-left

padding-right

padding-top

padding-bottom

4、在网页上画个图形：

<!DOCTYPE html>

<head>

</head>

<style>

/* 圆 */

.one{

width:100px;

height:100px;

border:4px solid red;

border-radius: 100px;

}

/* 半圆形 */

/* 上半圆 */

.two{

width:200px;

height:100px;

background-color: red;

border-radius: 100px 100px 0 0;

}

/* 下半圆 */

.three{

width:200px;

height:100px;

background-color: red;

border-radius: 0 0 100px 100px;

}

/* 左半圆 */

.four{

width :100px;

height:200px;

background-color: red;

border-radius: 0 100px 100px 0

}

/* 右半圆 */

.five{

width :100px;

height:200px;

background-color: red;

border-radius: 100px 0 0 100px

}

/* 扇形 */

.six{

width :100px;

height:100px;

background-color: red;

border-radius: 100px 0 0 0

}

.seven{

width :100px;

height:100px;

background-color: red;

border-radius: 0 100px 0 0

}

.eigth{

width :100px;

height:100px;

background-color: red;

border-radius: 0 0 100px 0

}

.nine{

width :100px;

height:100px;

background-color: red;

border-radius: 0 0 0 100px

}

</style>

<body>

</div>

<br/>

</div><br/>

</div>

</div>

</div>

</div><br/>

</div><br/>

</div><br/>

</div><br/>

</div>

</body>

</html>

5、盒子阴影：

box-shadow:inset x-offset y-offset blur-radius color;

6、上示例：<html>

<head>

<title>美容热卖品</title>

</head>

<body>

<h2>大家都喜欢买的美容品</h2>

</div>

<ul>

<li><a href="#"><span>1</span>   <span>雅诗兰黛即时修护眼部精华霜15ml</span></a> </li>

<li><a href="#"><span>2</span>   <span>伊丽莎白雅顿显效复合活肤霜 75ml</span></a> </li>

<li><a href="#"><span>3</span>   <span>OLAY玉兰油多效修护霜 50g</span></a> </li>

<li><a href="#"><span>4</span>   <span>巨型一号丝瓜水320ML</span></a> </li>

<li><a href="#"><span>5</span>   <span>倩碧保湿洁肤水2号 200ml</span></a> </li>

<li><a href="#"><span>6</span>   <span>比度克细肤淡印霜 30g</span></a> </li>

<li><a href="#"><span>7</span>   <span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml </span></a> </li>

<li><a href="#"><span>8</span>   <span>SK-II护肤精华露 215ml </span></a> </li>

<li><a href="#"><span>9</span>   <span>欧莱雅青春密码活颜精华肌底液</span></a> </li>

</ul>

</div>

</body>

</html>

/* 去除所有内外边距 */

margin:0;

padding:0;

}

/* 去超链接的下划线 */

a {

text-decoration: none;

}

/* 去小圆点 */

li{

list-style: none;

}

/* 整个布局背景设置 */

body{

background:#eee7e1;

}

/* 内容背景设置 */

.container{

background: #fff;

width: 400px;

margin:10px;

}

/* 标题 */

.title>h2{

background-color: #e6005a;

color:#fff;

font-size: 16px;

padding-left: 12px;

line-height:40px;

}

.list ul li{

font-size: 14px;

border-bottom:1px dashed #000;

}

/* 内容小圆圈s */

.list ul li span:first-child{

margin:2px;

/* span 标签转换成具有行内和块元素特点 */

display :inline-block;

width: 19px;

height:28px;

background:#000;

border-radius: 50%;

color:#fff;

margin-left: 1px;

padding-left:10px;

}

li a:hover{

color:red;

}

li a:hover>span:first-child{

color:#e6005a

}

效果图展示链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlSix/meirongremai.html

天我发了几篇关于CSS文字效果的文章，接下来给大家介绍一下如何使用CSS完成文本阴影效果。

该 text-shadow 属性可用于为您的文本提供美丽的阴影效果。使用此属性，可以为HTML元素的文本提供不同类型的阴影效果。

您可以为此属性的四个参数赋予值，如下所示。

CSS

text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

值

这些参数定义如下。

水平偏移（必需）： 这是阴影与文本的水平距离。正水平偏移将阴影置于文本的右侧，而负水平偏移将阴影置于文本的左侧。
垂直偏移（必需）： 这是文本上方或下方阴影的垂直距离。正垂直偏移将阴影置于文本的底部，而负垂直偏移将阴影置于文本的顶部。
模糊半径（可选）： 给予模糊半径使阴影模糊。较高的模糊半径值将使阴影更加模糊和扩展，从而使其更大更轻。另一方面，较小的模糊半径值将导致更清晰，更亮和更少扩展的阴影。不允许使用负值。
color（可选）： 指定阴影的颜色。

让我们通过一个例子来理解这一点。以下代码将更改文本的字体大小和颜色。

HTML

<p>Text Shadow</p>

CSS

p {
 font-family: 'Muli', sans-serif;
 font-size: 47px;
 font-weight: 900;
 color: #CFC547;
}

现在，考虑到上述每个参数的影响，让我们为这个文本画一个阴影。

水平偏移

如果只想在文本的左侧或右侧使用阴影，则给出垂直偏移0的值。

要将阴影置于文本的右侧，请给出正的水平偏移值。

CSS

.text {
	text-shadow: 3px 0 rgba(81,67,21,0.8);
}

负值会将阴影置于框的左侧。

CSS

.text {
	text-shadow: -3px 0 rgba(81,67,21,0.8);
}

在上面的代码中， rgba（81,67,21,0.8） 是阴影的颜色。如果没有给出阴影颜色，则文本阴影的颜色将与文本的颜色相同。

垂直偏移

与上面的情况相同，如果您希望阴影仅位于文本的顶部或底部，请给出0水平偏移。

正垂直偏移值将阴影置于文本的底部。

CSS

.text {
	text-shadow: 0 4px rgba(81,67,21,0.8);
}

负值会将阴影置于文本的上方。

CSS

.text {
	text-shadow: 0 -4px rgba(81,67,21,0.8);
}

如果你想要一个右下角的阴影，那么给出水平偏移和垂直偏移都是正的。

CSS

.text {
	text-shadow: 3px 4px rgba(81,67,21,0.8);
}

模糊半径

模糊使阴影看起来真实。要为阴影提供模糊效果，请给它一些正方形模糊半径。

CSS

.text {
	text-shadow: 3px 4px 7px rgba(81,67,21,0.8);
}

颜色

您可以通过提供任何颜色名称或颜色值（如rgba或hsla）为阴影指定颜色。如果将不透明度设置为小于1的值（如上面的情况，不透明度设置为0.8），它会为阴影提供漂亮且更自然的外观。

给多个阴影

您还可以为某些文本提供多个阴影，以提供不同的阴影效果。这些值以逗号分隔给 text-shadow属性。

例如，请考虑以下代码。

CSS

.text {
 text-shadow: 3px 0px 7px rgba(81,67,21,0.8), -3px 0px 7px rgba(81,67,21,0.8);
}

这里，为text-shadow 属性提供了两个阴影值，以逗号分隔。第一个值将在文本的右侧绘制阴影，而第二个值将在文本的左侧绘制阴影。

考虑一些给出多个阴影的例子。

整理不易，请大家多多关注支持我，谢谢！

您2019猪事顺利，心想事成。

前言

前面两篇文章都有提到过box-shadow，里面也有很多的基础知识，有看过的小伙伴应该都有或多或少的收获吧，今天我们再从基础入手，希望能让大家更熟悉它。

没有看过之前文章的小伙伴请点击：

CSS3 box-shadow实现背景动画

CSS3动画解析抖音 LOGO制作

下面我们从最基础的开始演示。

单侧投影

关键点: 1、外 box-shadow 前四个参数：x 偏移值、y 偏移值、模糊半径、扩张半径。 2、单侧投影的核心是第四个参数：扩张半径。这个参数会根据你指定的值去扩大或缩小投影尺寸，如果我们用一个负的扩张半径，而他的值刚好等于模糊半径，那么投影的尺寸就会与投影所属的元素尺寸完全一致，除非使用偏移量来移动他，否则我们将看不到任何投影。

<style>
.left {
 box-shadow: -8px 0 5px -5px #333;
}

.right {
 box-shadow: 8px 0 5px -5px #333;
}

.top {
 box-shadow: 0 -8px 5px -5px #333;
}

.bottom {
 box-shadow: 0 8px 5px -5px #333;
}
</style>
<div class='left'>左</div>
<div class='right'>右</div>
<div class='top'>上</div>
<div class='bottom'>下</div>

立体文字阴影

知识点：

1、立体文字阴影的关键点在于多层 text-shadow 的叠加

2、合理运用了 SASS 函数来自动计算多层 text-shadow 的 CSS 代码

3、运用了 Sass 的颜色函数，渐进实现层级阴影颜色 - fade-out: 改变颜色的透明度，让颜色更加透明 - desaturate: 改变颜色的饱和度值，让颜色更少的饱和

4、HSL(颜色值)

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%

<style>
@function blessing($color) {
 $val: 0px 0px $color;
 @for $i from 1 through 50 {
 $color: fade-out(desaturate($color, 1%), .02);
 $val: #{$val}, -#{$i}px #{$i}px #{$color};
 }
 @return $val;
}

div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: blessing(hsl(0, 100%, 50%));
 color: hsl(14, 100%, 60%);
}
</style>
<div>福</div>

编译后的css(推荐scss在线编译为css工具) https://www.sassmeister.com/

...
div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: 0px 0px #992400, 
 1px 1px rgba(152, 36, 1, 0.98), 
 2px 2px rgba(151, 37, 2, 0.96), 
 3px 3px rgba(151, 37, 2, 0.94), 
 ...
 ...
 ... 
 49px 49px rgba(116, 56, 37, 0.02), 
 50px 50px rgba(115, 56, 38, 0);
 color: #ff6333;
}

从浅到深的学习 CSS3阴影(box-shadow)

线性渐变模拟长阴影

知识点

1、借用了元素的两个伪元素

2、通过渐变色填充两个伪元素，再通过位移、变换放置在合适的位置

<style>
div {
 position: relative;
 width: 30vmin;
 height: 30vmin;
 line-height: 30vh;
 text-align: center;
 font-size: 30px;
 background: #fff;
 margin: 30vmin auto;
}

div::before,
div::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
}

div::before {
 content: ':before';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 50%;
 transform: translate(100%, 0) skewY(45deg) scaleX(.6);
 background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
}

div::after {
 content: ':after';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 0;
 transform: translate(0%, 100%) skewX(45deg) scaleY(.6);
 background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
</style>
<div>Web秀</div>

从浅到深的学习 CSS3阴影(box-shadow)

渐变实现内切角

知识点

1、阴影实现的关键点在于使用伪元素绝对定位在容器的一角，元素本身透明，阴影扩散开形成内切圆角效果

2、阴影实现缺点，单个标签最多只能是2个内切圆角

3、径向渐变实现内切圆角可以是4边

<style>
div {
 position: relative;
 width: 20vw;
 height: 8vw;
 margin: 1vw auto;
 border-radius: 1vmin;
 overflow: hidden;
 line-height: 8vw;
 color: #fff;
 text-align: center;
}

.shadow::before {
 position: absolute;
 content: "";
 top: -2vw;
 left: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.shadow::after {
 position: absolute;
 content: "";
 bottom: -2vw;
 right: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.linear {
 background-size: 70% 70%;
 background-image: 
 radial-gradient(
 circle at 100% 100%, 
 transparent 1vw, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 100% 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 100%, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw);
 background-repeat: no-repeat;
 background-position: 
 right bottom, 
 left top, 
 right top, 
 left bottom;
}
</style>
<div class="shadow">阴影实现缺点最多是2边</div>
<div class="linear">径向渐变内切圆角4边</div>

从浅到深的学习 CSS3阴影(box-shadow)

圆环进度条动画

知识点 ：圆环进度条的移动本质上是阴影顺序延时移动的结果。

<style>
body {
 background: #000;
}

.container {
 position: relative;
 overflow: hidden;
 width: 124px;
 height: 124px;
 overflow: hidden;
 margin: 100px auto;
 border-radius: 50%;
}

.shadow {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 line-height: 120px;
 border-radius: 50%;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63;
 text-align: center;
}
.shadow:hover {
 animation: border 0.5s ease forwards;
}

@keyframes border {
 0% {
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px transparent;
 }
 25% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 50% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 75% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 100% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 120px 40px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
}
</style>
<div class="container">
 <div class="shadow">web 秀</div></div>
</div>

从浅到深的学习 CSS3阴影(box-shadow)

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”

在线咨询

上一篇：源码实现判断 html 中的标签是否闭合前端DO
下一篇：感觉CSS难学，怎么办？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

盒子模型-第六章

水平偏移

垂直偏移

模糊半径

颜色

前言

单侧投影

立体文字阴影

线性渐变模拟长阴影

渐变实现内切角

圆环进度条动画

公告

您的项目需求