整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          網(wǎng)頁前端設(shè)計(jì)-16邊框樣式

          <script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          邊框可以是圖片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è)屬性簡寫

          語法:

          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;
          簡寫為:
          border-top: 1px solid red;

          2、下邊框border-bottom

          border-bottom-width: 1px;
          border-bottom-style: solid;
          border-bottom-color: red;
          簡寫為:
          border-bottom: 1px solid red;
          

          3、左邊框border-left

          border-left-width: 1px;
          border-left-style: solid;
          border-left-color: red;
          簡寫為:
          border-left: 1px solid red;

          4、右邊框border-right

          border-right-width: 1px;
          border-right-style: solid;
          border-right-color: red;
          簡寫為
          border-right: 1px solid red;

          整體舉例

          人可能會(huì)疑惑,我為什么專門用一節(jié)內(nèi)容來說邊框和圓角。其實(shí),不為別的,只為它們在開發(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。下、左右邊框類似,換成對應(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)樽笊稀⒂疑稀⒂蚁潞妥笙隆H绻囟ㄖ付硞€(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)容,老陳講完了,如果覺得對你有所幫助,希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊,讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊,就是對老陳繼續(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#


          主站蜘蛛池模板: 亚洲AV无码国产精品永久一区| 精品人妻一区二区三区四区在线| 精品无码综合一区| 影音先锋中文无码一区| 国产午夜精品一区二区三区| 国产福利电影一区二区三区,免费久久久久久久精 | 久久无码人妻精品一区二区三区| 日韩免费一区二区三区在线 | 久久人妻av一区二区软件| 国产乱码精品一区二区三区中文 | 日韩美女视频一区| 国产福利在线观看一区二区| 国产精品美女一区二区| 福利一区二区在线| 肥臀熟女一区二区三区| 无码人妻视频一区二区三区| 亚洲一区免费在线观看| 天堂国产一区二区三区| 日韩精品无码免费一区二区三区| 91精品一区二区三区在线观看| 国产精品一区二区三区免费| 国产色精品vr一区区三区| 国模少妇一区二区三区| 无码人妻精品一区二区三区99仓本| 无码av人妻一区二区三区四区| 在线观看视频一区二区| 亚洲AV福利天堂一区二区三| 97se色综合一区二区二区| 国产一区高清视频| 亚洲一区二区三区高清视频| 亚洲视频在线一区二区| 无码人妻精品一区二区三区久久久| 精品无码人妻一区二区三区不卡| 无码中文字幕人妻在线一区二区三区 | 99久久精品费精品国产一区二区| 亚洲欧美国产国产综合一区| 日本亚洲国产一区二区三区| 国产成人精品一区二三区| 久久无码AV一区二区三区| 国产亚洲情侣一区二区无| 国产福利一区视频|