盒子模型-第六章

么是盒子模型？

盒子模型如圖所示

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小時內與您取得聯系。

整合營銷服務商

盒子模型-第六章

水平偏移

垂直偏移

模糊半徑

顏色

前言

單側投影

立體文字陰影

線性漸變模擬長陰影

漸變實現內切角

圓環進度條動畫

公告

您的項目需求