第11天｜16天搞定前端，CSS的圓角邊框，讓人賞心悅目

人可能會(huì)疑惑，我為什么專門用一節(jié)內(nèi)容來說邊框和圓角。其實(shí)，不為別的，只為它們?cè)陂_發(fā)中，在Web系統(tǒng)中，在手機(jī)頁面中，太常用了。有邊框的頁面，讓人耳目一新，一目了然；有圓角的內(nèi)容，讓人賞心悅目，心曠神怡。說的有點(diǎn)夸張了，就這么著吧。

邊框(border)一般為長方形形狀，有上下左右四條邊，CSS邊框?qū)傩栽试S你指定一個(gè)元素邊框的樣式和顏色。CSS的圓角(border-radius)方法，可給任何元素制作 "圓角"效果。

11.1 邊框逼格

在CSS中，你可以通過border和其延伸的，如border-style，來實(shí)現(xiàn)邊框的效果。上邊框相關(guān)的有border-top-style樣式、border-top-color顏色、border-top-width寬度和組合了它們的border-top。下、左右邊框類似，換成對(duì)應(yīng)的單詞即可。

邊框樣式(border-style)常用的有dotted(點(diǎn)線)、dashed(虛線)、solid(實(shí)線)、double(雙邊框)這四種，不常用的有g(shù)roove(3D溝槽)、ridge(3D脊邊)、inset(3D嵌入)和outset(3D突出)。

/* --------在樣式表文件中---------- */
/*4條邊框一起設(shè)置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四條邊框可個(gè)性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*單條邊框設(shè)置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件內(nèi)容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邊框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border統(tǒng)一設(shè)置四條邊框<br/>
    順序?yàn)椋篵order-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四條邊框一起設(shè)置，風(fēng)格可不同<br/>
    順序?yàn)?上、右、下、左。<br/>
    1. 只有一個(gè)值(如：border-width:2px)：表示4條邊框全部一樣；<br/>
    2. 有兩個(gè)值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三個(gè)值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四個(gè)值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    單獨(dú)一天邊框進(jìn)行設(shè)置<br/>
    border-top：頂部寬度、樣式、顏色，一起設(shè)置<br/>
    border-top-width:上邊框?qū)挾龋?lt;br/>
    border-top-style:上邊框樣式；<br/>
    border-top-color:上邊框顏色。
    <br/>
</div>
</body>
</html>

輸出結(jié)果

11.2 圓角風(fēng)格

使用CSS的border-radius 屬性，你可以給任何元素制作 "圓角"。 border-radius統(tǒng)一指定4個(gè)圓角，順序?yàn)樽笊稀⒂疑稀⒂蚁潞妥笙隆Ｈ绻囟ㄖ付硞€(gè)角的話，用border-top-left-radius等方式即可。

在樣式表ys2.css文中的內(nèi)容

/*4個(gè)角統(tǒng)一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*單獨(dú)指定一個(gè)角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內(nèi)容

<br/><br/>
<div class="four-radius">
    統(tǒng)一設(shè)置4個(gè)圓角<br/>
    一個(gè)值： 四個(gè)圓角值相同;<br/>
    兩個(gè)值: 左上角與右下角，右上角與左下角;<br/>
    三個(gè)值: 左上角, 右上角和左下角，右下角;<br/>
    四個(gè)值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    單獨(dú)指定某個(gè)角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

輸出結(jié)果

11.3 圓角邊框

不要重復(fù)造輪子，所以好多程序員一遇到問題，就喜歡搜索，我也是，哈哈哈~。CSS有指定邊框的屬性，也有圓角的屬性，將其放在一起，是不是就可以實(shí)現(xiàn)圓角邊框?答案毋庸置疑，答案是肯定的。

在樣式表ys2.css文件中的內(nèi)容

/*圓角邊框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內(nèi)容

<div class="corners">
    邊框?qū)傩院蛨A角屬性，組合成圓角邊框
</div>

輸出結(jié)果

好了，有關(guān)CSS的圓角邊框內(nèi)容，老陳講完了，如果覺得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯(cuò)的。

#前端##HTML5##CSS##程序員##Web#

置邊框最常使用border，比如這樣：

border: 1px dashed #333;

這是最常規(guī)的方法了，今天再來說說其他兩種方法，

outline方式
background方式

outline方法

這也算是一種比較常規(guī)的方法了，

outline: 1px solid;

但需要注意的是，outline是在容器的最外部，與border的渲染還是有點(diǎn)區(qū)別的，同時(shí)對(duì)比下：

border: 1px dashed #333;
outline: 1px solid;

外部實(shí)線是outline，內(nèi)部虛線是border，為了一致，可以設(shè)置outline-offset往內(nèi)縮一點(diǎn)：

outline-offset: -1px;

background方法

這是本文的重點(diǎn)，我也是剛get到此項(xiàng)技能，之前一直不知道background居然如此強(qiáng)大，直接上代碼：

background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;

這里我們只設(shè)置了上面看，而且還是虛線的，做一說明這種方式的強(qiáng)大，再把其他邊框補(bǔ)上去：

background: 
		linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
    linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
    #ffffff;

可見，使用background非常的靈活，邊框的位置可以任意調(diào)整。

現(xiàn)在我們已經(jīng)掌握這幾方式，但本文的重點(diǎn)是上面這種，我們現(xiàn)在來動(dòng)手操練下：

漸變邊框

background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px
    ,
    linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,
    linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,
    linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,
    #eee;

滾動(dòng)虛線邊框

.box {
  background:
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
     background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

滾動(dòng)漸變

.box {
  background:
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y;
     background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove 1s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;
    }
}

以上就是設(shè)置邊框的幾個(gè)小技巧。

參考：
https://www.cnblogs.com/coco1s/p/14291567.html

邊框可以是圖片img，也可以是div元素，也可以是table，也可以是span

一、邊框樣式的三要素：

1、邊框的寬度 border-width

2、邊框的外觀 border-style

3、邊框的顏色 border-color

二、邊框?qū)傩?/p>

語法：

border-width：像素值；
border-style: 屬性值；none 無樣式、dashed虛線、solid實(shí)線
border-color:關(guān)鍵字或者RGB值。

舉例：

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
div
{
	width=100px;
	height=50px;
}
#div1
{
border-width: 2;
border-style: solid;
border-color:red;	
}
</style>
	</head> 
	<body>
<div id=div1>你好，嘻嘻</div>
<div>你好，嘻嘻</div>

	</body>
</html>

邊框三個(gè)屬性簡(jiǎn)寫

語法：

border:1px solid red;
等價(jià)于
border-width:1px;
border-style: solid;
border-color:red;

舉例：

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
div
{
border: 1px solid red;
}
</style>
	</head> 
	<body>
<div>你好，嘻嘻</div>
	</body>
</html>

三、局部樣式

一個(gè)框有四個(gè)邊，如果想單獨(dú)設(shè)置一個(gè)邊就需要單獨(dú)設(shè)定

1、上邊框border-top

border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
簡(jiǎn)寫為：
border-top: 1px solid red;

2、下邊框border-bottom

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
簡(jiǎn)寫為：
border-bottom: 1px solid red;

3、左邊框border-left

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
簡(jiǎn)寫為：
border-left: 1px solid red;

4、右邊框border-right

border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
簡(jiǎn)寫為
border-right: 1px solid red;

整體舉例

在線咨詢

上一篇：JavaScript-a標(biāo)簽“href”用“#”還是“javascript：void(0)”？
下一篇：HTML標(biāo)簽以及各個(gè)標(biāo)簽屬性大全（網(wǎng)頁制作必備）

您的項(xiàng)目需求

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

整合營銷服務(wù)商

第11天｜16天搞定前端，CSS的圓角邊框，讓人賞心悅目

11.1 邊框逼格

11.2 圓角風(fēng)格

11.3 圓角邊框

outline方法

background方法

漸變邊框

滾動(dòng)虛線邊框

滾動(dòng)漸變

您的項(xiàng)目需求