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

人可能會疑惑，我為什么專門用一節內容來說邊框和圓角。其實，不為別的，只為它們在開發中，在Web系統中，在手機頁面中，太常用了。有邊框的頁面，讓人耳目一新，一目了然；有圓角的內容，讓人賞心悅目，心曠神怡。說的有點夸張了，就這么著吧。

邊框(border)一般為長方形形狀，有上下左右四條邊，CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。CSS的圓角(border-radius)方法，可給任何元素制作 "圓角"效果。

11.1 邊框逼格

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

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

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

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

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

HTML文件內容

<!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統一設置四條邊框<br/>
    順序為：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四條邊框一起設置，風格可不同<br/>
    順序為:上、右、下、左。<br/>
    1. 只有一個值(如：border-width:2px)：表示4條邊框全部一樣；<br/>
    2. 有兩個值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三個值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四個值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    單獨一天邊框進行設置<br/>
    border-top：頂部寬度、樣式、顏色，一起設置<br/>
    border-top-width:上邊框寬度；<br/>
    border-top-style:上邊框樣式；<br/>
    border-top-color:上邊框顏色。
    <br/>
</div>
</body>
</html>

輸出結果

11.2 圓角風格

使用CSS的border-radius 屬性，你可以給任何元素制作 "圓角"。 border-radius統一指定4個圓角，順序為左上、右上、右下和左下。如果要特定指定某個角的話，用border-top-left-radius等方式即可。

在樣式表ys2.css文中的內容

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

/*單獨指定一個角*/
.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文件中的內容

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

輸出結果

11.3 圓角邊框

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

在樣式表ys2.css文件中的內容

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

在HTML文件中的內容

<div class="corners">
    邊框屬性和圓角屬性，組合成圓角邊框
</div>

輸出結果

好了，有關CSS的圓角邊框內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

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

天，分享一波唯美的邊框，可增加我們的項目"亮"點，讓用戶愛起來。

漸變邊框動畫

事例地址：https://codepen.io/mike-schultz/pen/NgQvGO

CSS Animation Effect Border

事例地址：https://codepen.io/uiswarup/pen/RBByzW

懸停

事例地址：https://codepen.io/giana/pen/yYBpVY

SVG

事例地址：https://codepen.io/ZachSaucier/pen/kyGqm

Design For Button Border

事例地址：https://codepen.io/tmrDevelops/pen/VeRvKX

Create CSS Border Using SVG

事例地址：https://codepen.io/Mamboleoo/pen/zYOJOGb

Beautiful CSS Border For Button

事例地址：https://codepen.io/electerious/pen/qPjbGm

Gradient Border

事例地址：https://codepen.io/chriscoyier/pen/PXNPRq

Create Border Animation Css

事例地址：https://codepen.io/Varin/pen/XjagZv

Striped Outline Button CSS

事例地址：https://codepen.io/Zeindelf/pen/vZbyEg

Image Border Animation CSS

事例地址：https://codepen.io/pavger/pen/bNrxrj

Hover Border

事例地址：https://codepen.io/jessedean/pen/BzjweX

Border SVG Ellipse

事例地址：https://codepen.io/coreybullman/pen/yJoZVQ

Create Circle Border Gradient

事例地址：https://codepen.io/aniketkudale/pen/PoqmexO

Border Shadow Animation

事例地址：https://codepen.io/fixcl/pen/lemjw

Motion With Border Radius CSS

事例地址：https://codepen.io/yukulele/pen/AjFBs

Border Card CSS

事例地址：https://codepen.io/fossheim/pen/LYVOBRZ

Animation Border

事例地址：https://codepen.io/HYPNOS/pen/GFxoC

Gradient Border HTML CSS

事例地址：https://codepen.io/4815162342/pen/NaLdNx

所有源碼可關注《JavaScript 每日一練》后臺回復 css20 獲取

~~完，我是刷碗，勵志等退休后，要回家擺地攤的人，我們下期見！

作者：niemvuilaptrin 譯者：前端小智來源：medium 原文：https://niemvuilaptnh.medium.com/23-border-css-javasript-beautiful-in-website-7286a05e0ad7

例

簡單的三框架頁面：

</frameset>

瀏覽器支持

所有主流瀏覽器都支持 <frame> 標簽。

標簽定義及使用說明

HTML5 不支持 <frame> 標簽。

<frame> 標簽定義 <frameset> 中的子窗口（框架）。

<frameset> 中的每個 <frame> 都可以設置不同的屬性，比如 border、scrolling, noresize 等等。

注釋：如果您希望驗證包含框架的頁面，請確保 <!DOCTYPE> 被設置為 "HTML Frameset DTD" 或者 "XHTML Frameset DTD" 。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <frame> 標簽，HTML 4.01 支持 <frame> 標簽。

HTML 與 XHTML 之間的差異

在 HTML 中，<frame> 標簽沒有結束標簽。在 XHTML 中，<frame> 標簽必須被正確地關閉。

可選的屬性

屬性	值	描述
frameborder	01	HTML5 不支持。規定是否顯示框架周圍的邊框。
longdesc	URL	HTML5 不支持。規定一個包含有關框架內容的長描述的頁面。
marginheight	pixels	HTML5 不支持。規定框架的上方和下方的邊距。
marginwidth	pixels	HTML5 不支持。規定框架的左側和右側的邊距。
name	name	HTML5 不支持。規定框架的名稱。
noresize	noresize	HTML5 不支持。規定無法調整框架的大小。
scrolling	yesnoauto	HTML5 不支持。規定是否在框架中顯示滾動條。
src	URL	HTML5 不支持。規定在框架中顯示的文檔的 URL。

標準屬性

在 HTML 4.01 中，<frame> 標簽支持如下標準屬性：

屬性	值	描述
class	classname	規定元素的類名
id	id	規定元素的唯一 id
style	style_definition	規定元素的行內樣式
title	text	規定元素的額外信息

如需完整的描述，請訪問標準屬性。

事件屬性

根據 W3C 的標準，在 HTML 4.01 中，<frame> 標簽不支持任何的事件屬性。

但是，所有的瀏覽器都支持 onload 事件。

如需完整的描述，請訪問事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：海淘太麻煩？這些海淘網站可以直接支付寶付款！快收藏吧
下一篇：JavaScript實現簡單版刪除留言功能

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

11.1 邊框逼格

11.2 圓角風格

11.3 圓角邊框

漸變邊框動畫

CSS Animation Effect Border

懸停

SVG

Design For Button Border

Create CSS Border Using SVG

Beautiful CSS Border For Button

Gradient Border

Create Border Animation Css

Striped Outline Button CSS

Image Border Animation CSS

Hover Border

Border SVG Ellipse

Create Circle Border Gradient

Border Shadow Animation

Motion With Border Radius CSS

Border Card CSS

Animation Border

Gradient Border HTML CSS

您的項目需求