上海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 类选择器里面的定义的变量颜色（红色）。