习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>
*请认真填写需求信息,我们会在24小时内与您取得联系。