上海HTML5開發(fā)培訓機構大咖分享html虛線邊框設置教程

習HTML時有時候我們需要用代碼設置邊框或虛線邊框的樣式，那該怎么設置呢？下面上海非凡進修學院HTML5開發(fā)培訓機構大咖分享下html虛線邊框設置教程，會對幾個不同標簽加虛線邊框效果樣式，同學們可以根據(jù)示例靈活掌握與應用到自己DIV+CSS布局中。

為了對html不同標簽加邊框虛線，我們選擇幾個常用標簽對齊設置邊框虛線效果。

1、html常用標簽

div標簽

span

ul li

table tr td

2、實例用到CSS屬性單詞

border

width

height

3、實現(xiàn)虛線的CSS重點介紹

border為邊框?qū)傩裕绻獙崿F(xiàn)對象邊框效果，要設置邊框?qū)挾取⑦吙蝾伾⑦吙驑邮剑▽嵕€還是虛線）

border:1px dashed #F00 這個就是設置邊框樣式寬度為1px，虛線，虛線為紅色。

4、實例描述

我們對以上幾個標簽設置相同寬度、相同高度、邊框效果。

5、HTML代碼示例：

以上示例對html中不同標簽設置相同的樣式，包括相同邊框虛線。

上海HTML5開發(fā)培訓機構大咖提示邊框三個樣式

通常我們可以對邊框設置寬度（厚度）、邊框樣式、邊框顏色這三個屬性與參數(shù)。

1）、邊框顏色：border-color:#000

2）、邊框厚度（寬度）：border-width:1px

使用數(shù)字+單位設置邊框厚度寬度，如1px(邊框厚度寬度為1像素)，邊框必須為正數(shù)字，大于0的數(shù)值。否則設置邊框border樣式無效。

3）、border邊框樣式：border-style:solid

上海HTML5開發(fā)培訓機構大咖提示：邊框border樣式值如下：

none :無邊框。與任何指定的border-width值無關

hidden : 隱藏邊框。IE不支持

dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）

dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）

solid :實線邊框（常用）

double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值

groove : 根據(jù)border-color的值畫3D凹槽

ridge :根據(jù)border-color的值畫菱形邊框

inset : 根據(jù)border-color的值畫3D凹邊

outset : 根據(jù)border-color的值畫3D凸邊

到css虛線樣式，應該會想到border的solid，網(wǎng)頁布局中solid用的概率最高了，要有css虛線的效果還可以用圖片做背景，但是不推薦，盡量使用css虛線樣式做這個虛線的效果，那么css虛線樣式就是border中的dotted和dashed，這兩種都是css虛線，但是他們是有區(qū)別的。

1.dotted虛線

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虛線</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dotted虛線！</div>
</body>
</html>

效果：

2.dashed虛線

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虛線</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dashed虛線！</div>
</body>
</html>

效果：

除注明外的文章,均為來源:湯久生博客(QQ:1917843637),轉(zhuǎn)載請保留本文地址！

原文鏈接：http://tangjiusheng.com/divcss/115.html

做商城類項目的時候，我們可能都會經(jīng)歷過“優(yōu)惠券”這類需求，筆者在過往工作中，都是直接要求UI切圖來實現(xiàn)，直到有一天產(chǎn)品告訴我一個奇思妙想：這個優(yōu)惠券的寬度會隨內(nèi)容變化的！一下子讓我陷入了人生的大思考，這樣圖片方式可不好整吶，因此萌生一個想法：能不能用純css實現(xiàn)這些效果呢？

0. 內(nèi)倒角

首先我們來看下css如何實現(xiàn)內(nèi)倒角

.card {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: 
        radial-gradient(circle at left 50px, #fff, #fff 10px, transparent 10px),
        radial-gradient(circle at right 50px, #fff, #fff 10px, transparent 11px),
        radial-gradient(circle at 100px top, #fff, #fff 10px, transparent 11px),
        radial-gradient(circle at 100px bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
}

效果圖：

內(nèi)倒角效果圖

其實最先想到的是畫圓形，在這個例子當中，主要是利用了設置背景圖的屬性與radial-gradient漸變來實現(xiàn)，實際效果差不多，在形狀上呢還是保持整體方形，相信大家也看出來副作用，首先這個添加的漸變需要和背景顏色同步，比如設置的倒角是白色，背景是灰色的，那就露餡啦。

	使用圓形的可能情況為倒角設置顏色的效果

1. 實現(xiàn)虛線

上面實現(xiàn)了內(nèi)倒角，接下來就要考慮虛線了，既然要純css，能不能把虛線也給優(yōu)雅地實現(xiàn)了呢，其實線性漸變就可以做到，一起來看看：

.line {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
}

代碼效果：

虛線

/* 稍微調(diào)整下size屬性就能改變虛線寬度 */
background-size: 20px 1px;

虛線2

2. 實現(xiàn)波浪框

同樣是利用徑向漸變，我們嘗試下波浪框效果：

.card {
    background: red;
    width: 200px;
    height: 100px;
    position: relative;
}
.card:after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
    background-size: 10px 10px;
}

bolang

3. 組合

通過以上例子，優(yōu)惠券剪卡風格的效果已經(jīng)呼之欲出了，我們只需要把這些效果組合起來，對顏色位置寬度等細節(jié)進行調(diào)整~

豎型優(yōu)惠券例子效果：

.card1 {
    width: 120px;
    height: 150px;
    position: relative;
    background-image: 
        radial-gradient(circle at left 90px, #fff, #fff 10px, transparent 10px),
        radial-gradient(circle at right 90px, #fff, #fff 10px, transparent 11px);
    background-color: red;
    border-radius: 4px;
}

.card1 > .line {
    position: absolute;
    bottom: 60px;
    left: 14px;
    width: 96px;
    height: 1px;
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
}

究極組合，橫型優(yōu)惠券剪卡風格效果：

.card2 {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: 
        radial-gradient(circle at 130px top, #fff, #fff 10px, transparent 11px),
        radial-gradient(circle at 130px bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
    border-radius: 4px;
}

.card2 > .line {
    position: absolute;
    top: 50px;
    right: 31px;
    width: 78px;
    height: 1px;
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
    transform:rotate(90deg);
}

.card2:after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
/* 這里可以優(yōu)化一下，變?yōu)榘雸A，right也可以設置為0了 */
    background: radial-gradient(circle at right, #ffffff, #ffffff 4px, transparent 5px);
    background-size: 10px 14px;
}

是不是有那么點味道了呢，僅用徑向漸變和線性漸變就能做出來效果，一想到UI小姐姐都不用切圖給我，可以早早下班回去陪她男朋友了，我趕緊向她展示了成果，沒想到小姐姐跟我說，你這沒陰影不好看呀，這下子讓我又一次陷入了人生的大思考。

回到工位上，我放棄了思考，顫抖的手胡亂地加了一個shadow，果然，露餡了啊！

但是我們要冷靜，之前的思路是先畫一個方形，然后放置圓形或半圓疊蓋，所以最終還是會原形畢露，結(jié)果還是必須掏空那段半圓缺口啊，可css明顯是做不到的

等等，這時候就需要逆轉(zhuǎn)想法，不是先畫一個方形再剔除半圓，而是一開始就不畫半圓這個缺口，將整個不規(guī)則形狀填充出來，也就不需要剔除半圓了，先來看看下面這段css以及它的效果：

width: 300px;
  height: 100px;
  background: 
  radial-gradient(circle at right bottom, blue 10px, red 0) top right /50% 50px no-repeat,
  radial-gradient(circle at right top, blue 10px, orange 0) bottom right / 50% 50px no-repeat,
  radial-gradient(circle at left top, blue 10px, yellow 0) bottom left / 50% 50px no-repeat,
  radial-gradient(circle at left bottom, blue 10px, green 0) top left / 50% 50px no-repeat;

按這個思路將上面的例子轉(zhuǎn)為畫上下兩瓣方形，給透明徑向漸變繪制的circle以外的區(qū)域填上顏色，而陰影部分就用filter來處理

.card2 {
    width: 200px;
    height: 100px;
    position: relative;
    background: 
        radial-gradient(circle at 130px top, transparent 10px, red 0) top / 100% 51px no-repeat,
        radial-gradient(circle at 130px bottom, transparent 10px, red 0) bottom / 100% 51px no-repeat;
    border-radius: 4px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
    /* box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); */
}
.card2 > .line {
    /* 沒變化 */
}

最終效果如下，為了看清陰影故意加深了：

沒辦法，波浪框還是覆蓋上去的半圓，所以設置不上貼合的陰影效果，但是基本的券卡形式總算是完美實現(xiàn)了。

第二天UI小姐姐跟我說，她改了設計圖，叫我看看，我說停停，要不你還是切圖給我吧。

以上就是文章的全部內(nèi)容，希望對你有所幫助！如果覺得文章寫的不錯，可以點贊收藏，也歡迎關注，我會持續(xù)更新更多前端有用的知識與實用技巧，希望與你共同成長~關于作者茶無味de一天

在線咨詢

上一篇：7個圖表小介紹，構建交互式的最佳jquery圖表庫
下一篇：CSS 列表欄(li)如何顯示豎線

您的項目需求

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