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

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

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

1、html常用標簽

div標簽

span

ul li

table tr td

2、實例用到CSS屬性單詞

border

width

height

3、實現虛線的CSS重點介紹

border為邊框屬性，如果要實現對象邊框效果，要設置邊框寬度、邊框顏色、邊框樣式（實線還是虛線）

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

4、實例描述

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

5、HTML代碼示例：

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

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

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

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

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

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

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

上海HTML5開發培訓機構大咖提示：邊框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 : 根據border-color的值畫3D凹槽

ridge :根據border-color的值畫菱形邊框

inset : 根據border-color的值畫3D凹邊

outset : 根據border-color的值畫3D凸邊

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

0. 內倒角

首先我們來看下css如何實現內倒角

.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;
}

效果圖：

內倒角效果圖

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

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

1. 實現虛線

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

.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;
}

代碼效果：

虛線

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

虛線2

2. 實現波浪框

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

.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. 組合

通過以上例子，優惠券剪卡風格的效果已經呼之欲出了，我們只需要把這些效果組合起來，對顏色位置寬度等細節進行調整~

豎型優惠券例子效果：

.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;
}

究極組合，橫型優惠券剪卡風格效果：

.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);
/* 這里可以優化一下，變為半圓，right也可以設置為0了 */
    background: radial-gradient(circle at right, #ffffff, #ffffff 4px, transparent 5px);
    background-size: 10px 14px;
}

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

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

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

等等，這時候就需要逆轉想法，不是先畫一個方形再剔除半圓，而是一開始就不畫半圓這個缺口，將整個不規則形狀填充出來，也就不需要剔除半圓了，先來看看下面這段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;

按這個思路將上面的例子轉為畫上下兩瓣方形，給透明徑向漸變繪制的circle以外的區域填上顏色，而陰影部分就用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 {
    /* 沒變化 */
}

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

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

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

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

SS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

之前也有寫過 CSS 優惠券樣式《CSS3徑向漸變實現優惠券波浪造型》，這次再來溫習一遍，并且將更為詳細的講解，從布局到具體樣式說明，最后定義 CSS 變量，自定義主題顏色。

布局

布局其實是學習前端的重要部分，最常用的方式就是從上而下、從左而右、亦或者兩個相結合。

看上圖，而這里，我們就只是最簡單的布局方式，從上而下：

1、優惠券金額和過期時間

2、優惠券描述

3、按鈕（其實按鈕也可以放到“2”里面去）

這樣分析，我們就有了 html 架構了

<div class="coupon">
  <!-- 1、優惠券金額和過期時間 -->
  <div class="price">
    100元
    <span>優惠券</span>
    <p class="timeout">2020-12-31 18:18:18過期</p>
  </div>

  <!-- 2、優惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、過期作廢</p>
  </div>

  <!-- 3、按鈕 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

CSS修飾

接下來我們用 CSS 美化我們的 html 。同理，我們也根據布局分步進行樣式書寫。

1、優惠券金額和過期時間樣式

這里的核心就是上方的凹槽和下方的鋸齒

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css變量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

這里用到了徑向漸變，不清楚用法的小伙伴可以看看語法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注釋：

（1）、shape 確定圓的類型:

ellipse (默認): 指定橢圓形的徑向漸變。

circle ：指定圓形的徑向漸變

（2）、size 定義漸變的大小，可能值：

farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

closest-corner ：指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

（3）、position 定義漸變的位置。可能值：

center（默認）：設置中間為徑向漸變圓心的縱坐標值。

top：設置頂部為徑向漸變圓心的縱坐標值。

bottom：設置底部為徑向漸變圓心的縱坐標值。

（4）、start-color, ..., last-color 用于指定漸變的起止顏色。

這樣價格上方的凹槽就有了，接下來下方的鋸齒我們也可以用徑向漸變的方式實現：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

偽類元素 ::after 設置徑向漸變背景為一個圓，后進行平鋪就形成了鋸齒，調整位置。

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

其實還有更簡單的方法，可以直接用一個虛線邊框即可搞定，請看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

當然也有缺陷，間隔位置不好控制

2、優惠券描述與按鈕優惠券核心鋸齒已經搞定了，下面都是小菜啦，非常簡單咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按鈕樣式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

主題顏色

大家都看到了，我們上方代碼主要顏色都采用的變量，而且變量是定義在 .coupon 類選擇器里面的。這樣的原因是：

1、CSS變量作用域（CSS變量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主題使用

ok，我們就可以copy 多個優惠券，并給每個添加一個不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下來我們就為不同主題定義不同的顏色變量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

這樣，theme1主題下的優惠券，就是紫色主題，theme2主題下的優惠券，就是藍色主題...，而默認主題顏色就是我們 .coupon 類選擇器里面的定義的變量顏色（紅色）。

小結

今天你學到了嗎？從布局分析到具體實現，再到主題顏色，相信小伙伴們都各有所得。

在線咨詢

上一篇：如何在瀏覽器賬中查看網頁的HTML源代碼？
下一篇：HTML網頁編程之按鈕詳解

您的項目需求

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

整合營銷服務商

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

0. 內倒角

1. 實現虛線

2. 實現波浪框

3. 組合

布局

CSS修飾

1、優惠券金額和過期時間樣式

主題顏色

小結

您的項目需求

1、優惠券金額和過期時間樣式