border-left-style

  • 版本:CSS1
  • 媒体:视觉
border-left-style属性在CSS边框中是比较常用的,本文将带你深入理解border-left-style属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上border-left-style的演示案例,希望能够对你有所帮助。

border-left-style的详细用法

border-left-style<border-style>

<border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

默认值none

适用于:所有元素

继承性:无

动画性:否

计算值:指定值

相关属性:[ border-style ] || [ border-top-style ] || [ border-right-style ] || [ border-bottom-style ]

border-left-style有哪些值?

none:
无轮廓。border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image
hidden:
隐藏边框。IE7及以下尚不支持
dotted:
点状轮廓。IE6下显示为dashed效果
dashed:
虚线轮廓。
solid:
实线轮廓
double:
双线轮廓。两条单线与其间隔的和等于指定的border-width
groove:
3D凹槽轮廓。
ridge:
3D凸槽轮廓。
inset:
3D凹边轮廓。
outset:
3D凸边轮廓。

border-left-style的作用是什么?

设置或检索对象的左边边框样式。
  • 如果border-width等于0,本属性将失去作用。
  • 对应的脚本特性为borderLeftStyle

border-left-style兼容哪些浏览器?

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0 #1 #2 1.0 1.0 1.0 3.5
版本 7 #1
版本 8
  1. 不支持hidden属性值。
  2. dotted属性值显示为dashed的效果。

border-left-style的完整演示案例

前端纯css做手机端自适应带边框的三角

那就是移动端带边框的三角用css怎么做,而且让它自适应移动端刚开始我也在网上找了方法但是很不理想,最后结合大家的想法自己写了个,经测试暂时完美兼容...3月3日

有趣的CSS题目(2): 从条纹边框的实现谈盒子模型

CSS·CSS分享到:开本系列,讨论一些有趣的CSS题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的CSS细节。解题不考虑兼容性...2016年9月29日

CSS各种边框背景大全

sqrt(2)-1)r(这里的r表示border-radius)5、条纹背景背景知识:CSS线性渐变,background-size案例一...2016年6月27日

CSS边框盒子模型详解

所以叫它盒子模型其中content(内容)又可以有两个元素width(宽)和height(高)CSS边框样式可以使用border-style来设置边框的样式...2016年3月25日

《CSS权威指南》学习记录——内边距、边框、外边距

这部分内容是根据w3c来学习的,等我看完第七章和第八章后再向里面加些内容框模型概述CSS假定每个元素都会生成一个或多个矩形框,称其为元素框...2016年6月2日

放到这个白色的div中是显示不出来的(被div的白色衬托的没有办法显示出边框)。要想解决这个问题,需要用到CSS3中的新属性——background-clip...2016年4月25日

用CSS边框图像让你的网站更漂亮

以及耐心调整CSS文件才能使你的网页看起来不错。然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码。这篇文章将告诉你如何做到!边框属性...2016年1月13日

CSS如何实现当鼠标放在图片上时改变边框2015-12-1920:00:56cnblogs.com我是代码努力人点击CSS如何实现当鼠标放在图片上时改变边框:建议:尽可能的手写代码...2015年12月19日

CSS3边框通过CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框-并且不需使用设计软件,比如PhotoShop。在本章中,您将学到以下边框属性...2015年3月22日

DIV+CSS虚线边框|CSS虚线下划线及虚线样式

css5.com/shili/s296.shtmlhttp://www.divcss5.com/rumen/r120.shtml一、四边为虚线边框border:1px dashed #000...2014年12月1日

CSS的border边框属性及其在CSS3中的新特性

这篇文章主要介绍了详解CSS的border边框属性及其在CSS3中的新特性,既涵盖了基础的边框宽度与颜色设置又讲到了CSS3中的图片边框及边框渐变...2016年10月11日

/css">p.one{border-style:solid;border-width:5px;border-color:chartreuse;border-left-style:dotted;}p...2016年10月19日

用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求。但遗憾的是,大多数Android手机并不能识别0.5px。因此我们可以使用CSS3来变通的实现0...2016年10月3日

超出边框内容的文字用省略号来代替(纯CSS样式)

的文字用省略号来代替(纯CSS样式):display:block;white-space:nowrap;//文本不会换行,文本会在在同一行上继续,直到遇到标签为止...2016年5月10日

汇总的CSS设置网页table边框样式,希望可以对大家有所帮助:1.上边框宽度以下是引用片段:语法:border-top-width:<值>  允许值:thin|medium|thick|<长度> ...2015年3月26日

在使用渐变时,需要配置后备background-color或者background-image属性,供不支持css3渐变的浏览器使用,css3渐变需要编码4个样式的声明...2014年10月28日

3. css3边框(上)

css3中边框主要包含:1. border-radius 2. box-shadow 3...2016年1月29日

HTML5与CSS3之新增的边框属性

border-radius是设置边框的的圆角属性设置方式为:​border-radius:1px2px3px4px。分别设置的为左上右下、左下右上圆角...2016年10月28日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册