整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

上海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凸边

还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。

先来看看这段代码:

/**css*/
.d1{
 width: 0; 
 height: 0; 
 border: 100px solid #339933;
}
/**html*/
<div class="d1"></div>
/**css*/
.d2{
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color:#FFCCCC #0099CC #996699 #339933;
}
/**html*/
<div class="d2"></div>

CSS绘制三角形和箭头,不用再用图片了

看了这两段代码,和效果图,是不是有一点眉目了?原来画三角形,只需要用元素的`border`来控制就可以了,`border-with`控制大小, `border-style`控制样式(实线、虚线等), `border-color`控制颜色,分上、右、下、左

三角形示例

向下三角形

/**css*/
.d3{
 margin-left: 10px;
 float: left;
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color:#FFCCCC transparent transparent transparent;
}
/**html*/
<div class="d3"></div>

CSS绘制三角形和箭头,不用再用图片了

向左三角形

/**css*/
.d4{
 margin-left: 110px;
 float: left;
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color: transparent #0099CC transparent transparent;
}
/**html*/
<div class="d4"></div>

CSS绘制三角形和箭头,不用再用图片了

这里的`transparent`是透明的意思

接下来两种就留给聪明的你了,相信你可以的,动手才知道原来这么简单!

其实我们还可以通过,一种样式,来实现不能角度的三角形,那就是利用CSS3里面的旋转`transform:rotate(90deg)`。

/**css*/
.d4{
 margin-left: 110px;
 float: left;
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color: transparent #0099CC transparent transparent;
 transform: rotate(90deg); /*顺时针旋转90°*/
}
/**html*/
<div class="d4"></div>

CSS绘制三角形和箭头,不用再用图片了

箭头示例

向左箭头

/**css*/
.left{
 position: absolute;
}
.left:before,.left:after{
 position: absolute;
 content: '';
 border-top: 10px transparent dashed;
 border-left: 10px transparent dashed;
 border-bottom: 10px transparent dashed;
 border-right: 10px #fff solid;
}
.left:before{
 border-right: 10px #0099CC solid;
}
.left:after{
 left: 1px; /*覆盖并错开1px*/
 border-right: 10px #fff solid;
}
/**html*/
<i class="left" ></div>

CSS绘制三角形和箭头,不用再用图片了

是不是发现箭头和三角形是一样的呢?发现了,说明你已经懂了,箭头其实就是2个三角形,然后用白色三角形覆盖蓝色三角形,并且错开1px,刚刚好就形成了箭头。这就和《最强大脑》层叠消融项目是一样的。

向上箭头

/**css*/
.top{
 position: absolute;
}
.top:before,.top:after{
 position: absolute;
 content: '';
 border-top: 10px transparent dashed;
 border-left: 10px transparent dashed;
 border-right: 10px transparent dashed;
 border-bottom: 10px #fff solid;
}
.top:before{
 border-bottom: 10px #0099CC solid;
}
.top:after{
 top: 1px; /*覆盖并错开1px*/
 border-bottom: 10px #fff solid;
}
/**html*/
<i class="top" ></div>

CSS绘制三角形和箭头,不用再用图片了

通过上面两个例子,我想剩余两个方向的箭头,你应该可以搞定了,就是不能,那就会一种就好了,然后通过`transform:rotate(90deg)`,来旋转角度,还是能搞定各个方向的箭头。

公告

喜欢小编的点击关注,了解更多资源!

用CSS3实现某元素的投影效果,有两种方案,第一个就是使用常见的box-shadow, 另外一个就是CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢?

一、兼容性

CSS3 box-shadow从IE9浏览器开始就支持了,兼容性如下截图:

而filter中的drop-shadowIE13才开始支持,移动端Android4.4才开始支持。兼容性如下图:

二、同样的参数值,表现效果有差异

filter中的drop-shadow语法如下:

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

比如

filter:drop-shadow(5px 5px 10px black)

表示右下5像素偏移,10像素模糊的黑色阴影。眼见为实,看下面的图片示意。

但是,如果使用同样参数值的box-shadow,例如:

box-shadow: 5px 5px 10px black;

会发现,box-shadow的阴影距离更小,色值要更深:

三、drop-shadow没有内阴影效果

box-shadow支持inset内阴影,如:

box-shadow: inset 5px 5px 10px black;

但是,drop-shadow却没有。

四、阴影 vs 盒阴影

drop-shadow有一个很厉害的特性,也就这一个特性,让其以后有足够的机会大放异彩!那就是,drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影而已。

什么意思呢?

下面我们用CSS border写一个虚线框,例如:

border: 10px dashed #fa608d;

height: 50px;

width: 50px;

然后,我们分别应用box-shadow和drop-shadow滤镜:

box-shadow: 5px 5px 10px black;

filter: drop-shadow(5px 5px 10px black);

box-shadow:

filter:drop-shadow:

box-shadow顾名思意“盒阴影”,只是盒子的阴影;你想啊,这盒子中间明明是透明的,结果,阴影的时候,居然光线没有穿透;但是filter:drop-shadow就符合真实世界的投影,只要是透明的都有投影。

filter: drop-shadow不仅可以穿透代码构建的元素的透明部分,PNG图片的透明部分也是可以穿透的,如下图:

六、drop-shadow的实际应用

我们实现带有箭头指向的浮层面板的时候,考虑到兼容性,三角部分基本上都是使用border绘制的,没法通过box-shadow绘制阴影,于是,就会出现下图所示的情况:

箭头没有阴影,蒙混过关。现在,有了drop-shadow,箭头部分也可以有阴影了。

CSS代码:

.box {

margin: 40px; padding: 50px;

background-color: #fff;

position: relative;

font-size: 24px;

}

.cor {

position: absolute;

left: -40px;

widtd: 0; height: 0;

overflow: hidden;

border: 20px solid transparent;

border-right-color: #fff;

}

.box-shadow {

box-shadow: 5px 5px 10px black;

}

.drop-shadow {

filter: drop-shadow(5px 5px 10px black);

}

HTML代码:

<div class="box box-shadow">

<i class="cor"></i>

box-shadow

</div>