整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
么是盒子模型？
盒子模型如圖所示
1、邊框：
border-color
border-width
border-style
屬性 說(shuō)明 示例
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四個(gè)邊框?yàn)橥活伾玝order-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的簡(jiǎn)寫：
border:1px solid #3a6587;
border: 1px dashed red;
2、外邊距：margin
margin-top；
margin-right；
margin-bottom；
margin-left；
網(wǎng)頁(yè)居中對(duì)齊：margin:0px auto;
網(wǎng)頁(yè)居中對(duì)齊的必要條件：塊元素、固定寬度
3、內(nèi)邊距：padding
padding-left
padding-right
padding-top
padding-bottom
4、在網(wǎng)頁(yè)上畫個(gè)圖形：
<!DOCTYPE html>
<html lang="en">
<head>
<title>圓角邊框</title>
</head>
<!-- 內(nèi)部樣式表 -->
<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 class="container">
<div class="one">
</div>
<br/>
<div class="two">
</div><br/>
<div class="three">
</div>
<div class="four">
</div>
<div class="five">
</div>
<div class="six">
</div><br/>
<div class="seven">
</div><br/>
<div class="eigth">
</div><br/>
<div class="nine">
</div><br/>
</div>
</body>
</html>
5、盒子陰影：
box-shadow:inset x-offset y-offset blur-radius color;
6、上示例：<html>
<head>
<title>美容熱賣品</title>
</head>
<link rel="stylesheet" href="meirongremai.css">
<body>
<div class="container">
<div class="title">
<h2>大家都喜歡買的美容品</h2>
</div>
<div class="list">
<ul>
<li><a href="#"><span>1</span> <span>雅詩(shī)蘭黛即時(shí)修護(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>巨型一號(hào)絲瓜水320ML</span></a> </li>
<li><a href="#"><span>5</span> <span>倩碧保濕潔膚水2號(hào) 200ml</span></a> </li>
<li><a href="#"><span>6</span> <span>比度克細(xì)膚淡印霜 30g</span></a> </li>
<li><a href="#"><span>7</span> <span>蘭芝 (LANEIGE)夜間修護(hù)鎖水面膜 80ml </span></a> </li>
<li><a href="#"><span>8</span> <span>SK-II護(hù)膚精華露 215ml </span></a> </li>
<li><a href="#"><span>9</span> <span>歐萊雅青春密碼活顏精華肌底液</span></a> </li>
</ul>
</div>
</div>
</body>
</html>
/* 去除所有內(nèi)外邊距 */
*{
margin:0;
padding:0;
}
/* 去超鏈接的下劃線 */
a {
text-decoration: none;
}
/* 去小圓點(diǎn) */
li{
list-style: none;
}
/* 整個(gè)布局背景設(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)和塊元素特點(diǎn) */
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文字效果的文章，接下來(lái)給大家介紹一下如何使用CSS完成文本陰影效果。
該 text-shadow 屬性可用于為您的文本提供美麗的陰影效果。使用此屬性，可以為HTML元素的文本提供不同類型的陰影效果。
您可以為此屬性的四個(gè)參數(shù)賦予值，如下所示。
CSS
text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];
值
這些參數(shù)定義如下。
讓我們通過(guò)一個(gè)例子來(lái)理解這一點(diǎn)。以下代碼將更改文本的字體大小和顏色。
HTML
<p>Text Shadow</p>
CSS
p {
font-family: 'Muli', sans-serif;
font-size: 47px;
font-weight: 900;
color: #CFC547;
}
現(xiàn)在，考慮到上述每個(gè)參數(shù)的影響，讓我們?yōu)檫@個(gè)文本畫一個(gè)陰影。
如果只想在文本的左側(cè)或右側(cè)使用陰影，則給出垂直偏移0的值。
要將陰影置于文本的右側(cè)，請(qǐng)給出正的水平偏移值。
CSS
.text {
text-shadow: 3px 0 rgba(81,67,21,0.8);
}
負(fù)值會(huì)將陰影置于框的左側(cè)。
CSS
.text {
text-shadow: -3px 0 rgba(81,67,21,0.8);
}
在上面的代碼中， rgba（81,67,21,0.8） 是陰影的顏色。如果沒(méi)有給出陰影顏色，則文本陰影的顏色將與文本的顏色相同。
與上面的情況相同，如果您希望陰影僅位于文本的頂部或底部，請(qǐng)給出0水平偏移。
正垂直偏移值將陰影置于文本的底部。
CSS
.text {
text-shadow: 0 4px rgba(81,67,21,0.8);
}
負(fù)值會(huì)將陰影置于文本的上方。
CSS
.text {
text-shadow: 0 -4px rgba(81,67,21,0.8);
}
如果你想要一個(gè)右下角的陰影，那么給出水平偏移和垂直偏移都是正的。
CSS
.text {
text-shadow: 3px 4px rgba(81,67,21,0.8);
}
模糊使陰影看起來(lái)真實(shí)。要為陰影提供模糊效果，請(qǐng)給它一些正方形模糊半徑。
CSS
.text {
text-shadow: 3px 4px 7px rgba(81,67,21,0.8);
}
您可以通過(guò)提供任何顏色名稱或顏色值（如rgba或hsla）為陰影指定顏色。如果將不透明度設(shè)置為小于1的值（如上面的情況，不透明度設(shè)置為0.8），它會(huì)為陰影提供漂亮且更自然的外觀。
給多個(gè)陰影
您還可以為某些文本提供多個(gè)陰影，以提供不同的陰影效果。這些值以逗號(hào)分隔給 text-shadow屬性。
例如，請(qǐng)考慮以下代碼。
CSS
.text {
text-shadow: 3px 0px 7px rgba(81,67,21,0.8), -3px 0px 7px rgba(81,67,21,0.8);
}
這里，為text-shadow 屬性提供了兩個(gè)陰影值 ，以逗號(hào)分隔。第一個(gè)值將在文本的右側(cè)繪制陰影，而第二個(gè)值將在文本的左側(cè)繪制陰影。
考慮一些給出多個(gè)陰影的例子。
整理不易，請(qǐng)大家多多關(guān)注支持我，謝謝！
您2019豬事順利，心想事成。
前面兩篇文章都有提到過(guò)box-shadow，里面也有很多的基礎(chǔ)知識(shí)，有看過(guò)的小伙伴應(yīng)該都有或多或少的收獲吧，今天我們?cè)購(gòu)幕A(chǔ)入手，希望能讓大家更熟悉它。
沒(méi)有看過(guò)之前文章的小伙伴請(qǐng)點(diǎn)擊：
CSS3 box-shadow實(shí)現(xiàn)背景動(dòng)畫
CSS3動(dòng)畫解析抖音 LOGO制作
下面我們從最基礎(chǔ)的開(kāi)始演示。
關(guān)鍵點(diǎn): 1、外 box-shadow 前四個(gè)參數(shù)：x 偏移值、y 偏移值 、模糊半徑、擴(kuò)張半徑。 2、單側(cè)投影的核心是第四個(gè)參數(shù)：擴(kuò)張半徑。這個(gè)參數(shù)會(huì)根據(jù)你指定的值去擴(kuò)大或縮小投影尺寸，如果我們用一個(gè)負(fù)的擴(kuò)張半徑，而他的值剛好等于模糊半徑，那么投影的尺寸就會(huì)與投影所屬的元素尺寸完全一致，除非使用偏移量來(lái)移動(dòng)他，否則我們將看不到任何投影。
<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>
知識(shí)點(diǎn)：
1、立體文字陰影的關(guān)鍵點(diǎn)在于多層 text-shadow 的疊加
2、合理運(yùn)用了 SASS 函數(shù)來(lái)自動(dòng)計(jì)算多層 text-shadow 的 CSS 代碼
3、運(yùn)用了 Sass 的顏色函數(shù)，漸進(jìn)實(shí)現(xiàn)層級(jí)陰影顏色 - fade-out: 改變顏色的透明度，讓顏色更加透明 - desaturate: 改變顏色的飽和度值，讓顏色更少的飽和
4、HSL(顏色值)
<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)
從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
知識(shí)點(diǎn)
1、借用了元素的兩個(gè)偽元素
2、通過(guò)漸變色填充兩個(gè)偽元素，再通過(guò)位移、變換放置在合適的位置
<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)
知識(shí)點(diǎn)
1、陰影實(shí)現(xiàn)的關(guān)鍵點(diǎn)在于使用偽元素絕對(duì)定位在容器的一角，元素本身透明，陰影擴(kuò)散開(kāi)形成內(nèi)切圓角效果
2、陰影實(shí)現(xiàn)缺點(diǎn)，單個(gè)標(biāo)簽最多只能是2個(gè)內(nèi)切圓角
3、徑向漸變實(shí)現(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">陰影實(shí)現(xiàn)缺點(diǎn)最多是2邊</div>
<div class="linear">徑向漸變內(nèi)切圓角4邊</div>
從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
知識(shí)點(diǎn) ：圓環(huán)進(jìn)度條的移動(dòng)本質(zhì)上是陰影順序延時(shí)移動(dòng)的結(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)
喜歡小編的點(diǎn)擊關(guān)注，了解更多知識(shí)！
源碼地址和源文件下載請(qǐng)點(diǎn)擊下方“了解更多”
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
