目錄
盒子圓角
圓角基礎使用
圓角常見使用
通過設置盒子圓角得到一個圓形
通過設置盒子圓角，得到一個“操場”的樣式
盒子陰影
文字陰影
盒子圓角
圓角基礎使用
在 CSS3 中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了。
使用border-radius屬性用于設置元素的外邊框圓角。
基本語法如下：
選擇器 {
border-radius: 值;
}- 參數(shù)值可以為數(shù)值或百分比的形式
- 如果是正方形，想要設置為一個圓，把數(shù)值修改為高度或者寬度的一半即可，或者直接寫為
50% - 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
- 分開寫：
border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius
示例代碼：
- 四個角等半徑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子圓角</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #0ad192;
margin-bottom: 20px;
}
.round {
width: 200px;
height: 200px;
background-color: #0ad192;
/* 設置盒子圓角 */
border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
<div class="round"></div>
</body>
</html>效果如下：
- 兩個角對等半徑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子圓角</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #0ad192;
margin-bottom: 20px;
}
.round {
width: 200px;
height: 200px;
background-color: #0ad192;
/* 設置盒子圓角 */
border-radius: 10px 30px;
}
</style>
</head>
<body>
<div></div>
<div class="round"></div>
</body>
</html>效果如下：
- 三個角半徑（左上角，右上與左下角，右下角）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子圓角</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #0ad192;
margin-bottom: 20px;
}
.round {
width: 200px;
height: 200px;
background-color: #0ad192;
/* 設置盒子圓角 */
border-radius: 10px 50px 70px;
}
</style>
</head>
<body>
<div></div>
<div class="round"></div>
</body>
</html>效果如下：
- 四個角各不相等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子圓角</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #0ad192;
margin-bottom: 20px;
}
.round {
width: 200px;
height: 200px;
background-color: #0ad192;
/* 設置盒子圓角 */
border-radius: 10px 30px 50px 70px;
}
</style>
</head>
<body>
<div></div>
<div class="round"></div>
</body>
</html>
圓角常見使用
通過設置盒子圓角得到一個圓形
所謂圓形，放入一個正方形中就是正方形四個邊均與圓相切，此時半徑即為正方形每一條邊長的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子圓角</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #0ad192;
margin-bottom: 20px;
}
.round {
width: 200px;
height: 200px;
background-color: #0ad192;
/* 設置盒子圓角 */
/* 精確值 */
/* border-radius: 100px; */
/* 百分比 */
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<div class="round"></div>
</body>
</html>效果如下：
通過設置盒子圓角，得到一個“操場”的樣式
- 即兩個半圓拼接到長方形的兩個短邊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子圓角</title>
<style>
div {
width: 600px;
height: 200px;
background-color: #0ad192;
margin-bottom: 20px;
}
.round {
/* 前提為長方形 */
width: 600px;
height: 200px;
background-color: #0ad192;
/* 設置盒子圓角 */
/* 精確值 */
/* 設置為高度的一半長度 */
border-radius: 100px;
}
</style>
</head>
<body>
<div></div>
<div class="round"></div>
</body>
</html>效果如下：
盒子陰影
CSS3 中新增了盒子陰影，可以使用 box-shadow 屬性為盒子添加陰影。
基本語法如下：
選擇器 {
box-shadow: h-shadow v-shadow blur spread color inset;
}屬性值介紹：
| 屬性值 |
描述 |
|
|
（必需值）水平陰影(horizontal shadow)，可以為負值 |
|
|
（必需值）垂直陰影(vertical shadow)，可以為負值 |
|
|
（可選值）陰影模糊程度 |
|
|
（可選值）陰影尺寸 |
|
|
（可選值）陰影顏色 |
|
|
（可選值）將外（盒子的背面）陰影改為內(nèi)（盒子之上）陰影 |
注意
- 默認的是外陰影(outset) ，但是不可以顯式寫這個單詞，否則造成陰影無效
- 盒子陰影不占用空間，不會影響其他盒子排列。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子陰影</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #0ad192;
margin-bottom: 20px;
}
.shadow {
width: 200px;
height: 200px;
background-color: #0ad192;
/* 設置盒子陰影 */
box-shadow: 0px 5px 10px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div></div>
<div class="shadow"></div>
</body>
</html>效果如下：
文字陰影
在 CSS3 中，可以使用 text-shadow 屬性將陰影應用于文本
基本語法如下：
選擇器 {
text-shadow: h-shadow v-shadow blur color;
}屬性值介紹：
| 屬性值 |
描述 |
|
|
（必需值）水平陰影(horizontal shadow)，可以為負值 |
|
|
（必需值）垂直陰影(vertical shadow)，可以為負值 |
|
|
（可選值）陰影模糊程度 |
|
|
（可選值）陰影顏色 |
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本陰影</title>
<style>
span {
font-size: 100px;
color: red;
text-shadow: 2px 10px 2px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<span>文本陰影</span>
</body>
</html>效果如下：文章來源：http://www.zghlxwxcb.cn/news/detail-861432.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-861432.html
到了這里，關于CSS中的圓角和陰影的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術7（HTML5、CSS3、JavaScript ）CSS的定位機制——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
![[HTML]Web前端開發(fā)技術9（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
![[HTML]Web前端開發(fā)技術12（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/793019-1.png)
![[HTML]Web前端開發(fā)技術8（HTML5、CSS3、JavaScript ）CSS樣式屬性,withborder,italic | oblique,indent,padding,——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/755873-1.png)
