盒子模型-第六章

么是盒子模型？

盒子模型如圖所示

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;

邊框粗細(xì)：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；

網(wǎng)頁居中對齊：margin:0px auto;

網(wǎng)頁居中對齊的必要條件：塊元素、固定寬度

3、內(nèi)邊距：padding

padding-left

padding-right

padding-top

padding-bottom

4、在網(wǎng)頁上畫個圖形：

<!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>雅詩蘭黛即時修護(hù)眼部精華霜15ml</span></a> </li>

<li><a href="#"><span>2</span>   <span>伊麗莎白雅頓顯效復(fù)合活膚霜 75ml</span></a> </li>

<li><a href="#"><span>3</span>   <span>OLAY玉蘭油多效修護(hù)霜 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>7</span>   <span>蘭芝 (LANEIGE)夜間修護(hù)鎖水面膜 80ml </span></a> </li>

<li><a href="#"><span>9</span>   <span>歐萊雅青春密碼活顏精華肌底液</span></a> </li>

</ul>

</div>

</body>

</html>

/* 去除所有內(nèi)外邊距 */

margin:0;

padding:0;

}

/* 去超鏈接的下劃線 */

a {

text-decoration: none;

}

/* 去小圓點 */

li{

list-style: none;

}

/* 整個布局背景設(shè)置 */

body{

background:#eee7e1;

}

/* 內(nèi)容背景設(shè)置 */

.container{

background: #fff;

width: 400px;

margin:10px;

}

/* 標(biāo)題 */

.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;

}

/* 內(nèi)容小圓圈s */

.list ul li span:first-child{

margin:2px;

/* span 標(biāo)簽轉(zhuǎn)換成具有行內(nèi)和塊元素特點 */

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

天我發(fā)了幾篇關(guān)于CSS文字效果的文章，接下來給大家介紹一下如何使用CSS完成文本陰影效果。

該 text-shadow 屬性可用于為您的文本提供美麗的陰影效果。使用此屬性，可以為HTML元素的文本提供不同類型的陰影效果。

您可以為此屬性的四個參數(shù)賦予值，如下所示。

CSS

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

值

這些參數(shù)定義如下。

水平偏移（必需）： 這是陰影與文本的水平距離。正水平偏移將陰影置于文本的右側(cè)，而負(fù)水平偏移將陰影置于文本的左側(cè)。
垂直偏移（必需）： 這是文本上方或下方陰影的垂直距離。正垂直偏移將陰影置于文本的底部，而負(fù)垂直偏移將陰影置于文本的頂部。
模糊半徑（可選）： 給予模糊半徑使陰影模糊。較高的模糊半徑值將使陰影更加模糊和擴(kuò)展，從而使其更大更輕。另一方面，較小的模糊半徑值將導(dǎo)致更清晰，更亮和更少擴(kuò)展的陰影。不允許使用負(fù)值。
color（可選）： 指定陰影的顏色。

讓我們通過一個例子來理解這一點。以下代碼將更改文本的字體大小和顏色。

HTML

<p>Text Shadow</p>

CSS

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

現(xiàn)在，考慮到上述每個參數(shù)的影響，讓我們?yōu)檫@個文本畫一個陰影。

水平偏移

如果只想在文本的左側(cè)或右側(cè)使用陰影，則給出垂直偏移0的值。

要將陰影置于文本的右側(cè)，請給出正的水平偏移值。

CSS

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

負(fù)值會將陰影置于框的左側(cè)。

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);
}

負(fù)值會將陰影置于文本的上方。

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）為陰影指定顏色。如果將不透明度設(shè)置為小于1的值（如上面的情況，不透明度設(shè)置為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 屬性提供了兩個陰影值，以逗號分隔。第一個值將在文本的右側(cè)繪制陰影，而第二個值將在文本的左側(cè)繪制陰影。

考慮一些給出多個陰影的例子。

整理不易，請大家多多關(guān)注支持我，謝謝！

您2019豬事順利，心想事成。

前言

前面兩篇文章都有提到過box-shadow，里面也有很多的基礎(chǔ)知識，有看過的小伙伴應(yīng)該都有或多或少的收獲吧，今天我們再從基礎(chǔ)入手，希望能讓大家更熟悉它。

沒有看過之前文章的小伙伴請點擊：

CSS3 box-shadow實現(xiàn)背景動畫

CSS3動畫解析抖音 LOGO制作

下面我們從最基礎(chǔ)的開始演示。

單側(cè)投影

關(guān)鍵點: 1、外 box-shadow 前四個參數(shù)：x 偏移值、y 偏移值、模糊半徑、擴(kuò)張半徑。 2、單側(cè)投影的核心是第四個參數(shù)：擴(kuò)張半徑。這個參數(shù)會根據(jù)你指定的值去擴(kuò)大或縮小投影尺寸，如果我們用一個負(fù)的擴(kuò)張半徑，而他的值剛好等于模糊半徑，那么投影的尺寸就會與投影所屬的元素尺寸完全一致，除非使用偏移量來移動他，否則我們將看不到任何投影。

<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、立體文字陰影的關(guān)鍵點在于多層 text-shadow 的疊加

2、合理運(yùn)用了 SASS 函數(shù)來自動計算多層 text-shadow 的 CSS 代碼

3、運(yùn)用了 Sass 的顏色函數(shù)，漸進(jìn)實現(xiàn)層級陰影顏色 - fade-out: 改變顏色的透明度，讓顏色更加透明 - desaturate: 改變顏色的飽和度值，讓顏色更少的飽和

4、HSL(顏色值)

H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來指定顏色。取值為：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;
}

從淺到深的學(xué)習(xí) 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>

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

漸變實現(xiàn)內(nèi)切角

知識點

1、陰影實現(xiàn)的關(guān)鍵點在于使用偽元素絕對定位在容器的一角，元素本身透明，陰影擴(kuò)散開形成內(nèi)切圓角效果

2、陰影實現(xiàn)缺點，單個標(biāo)簽最多只能是2個內(nèi)切圓角

3、徑向漸變實現(xiàn)內(nèi)切圓角可以是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">陰影實現(xiàn)缺點最多是2邊</div>
<div class="linear">徑向漸變內(nèi)切圓角4邊</div>

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

圓環(huán)進(jìn)度條動畫

知識點 ：圓環(huán)進(jìn)度條的移動本質(zhì)上是陰影順序延時移動的結(jié)果。

<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>

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

公告

喜歡小編的點擊關(guān)注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”

在線咨詢

上一篇：源碼實現(xiàn) 判斷 html 中的標(biāo)簽是否閉合前端DO
下一篇：感覺CSS難學(xué)，怎么辦？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

盒子模型-第六章

水平偏移

垂直偏移

模糊半徑

顏色

前言

單側(cè)投影

立體文字陰影

線性漸變模擬長陰影

漸變實現(xiàn)內(nèi)切角

圓環(huán)進(jìn)度條動畫

公告

您的項目需求