广西翔路建设有限责任公司网站,中小企业 wordpress,做暖暖视频免费观看免费网站,医院网站建设进度及实施过程基础样式 边框是一条以空格分隔的集合样式#xff0c;包括边框粗细(边框宽度)、边框颜色和边框样式#xff0c;且先后顺序无关 border: border-width border-color border-styleborder: 1px solid red;【边框样式】 如果一个边框没有样式#xff0c;边框将根本不会存在 关于…基础样式 边框是一条以空格分隔的集合样式包括边框粗细(边框宽度)、边框颜色和边框样式且先后顺序无关 border: border-width border-color border-styleborder: 1px solid red;【边框样式】 如果一个边框没有样式边框将根本不会存在 关于虚线dashed在chrome/firefox下虚线宽高比是3/1而在IE下虚线宽高比为2/1。所以在IE下虚线显得比较密 关于点线dotted在chrome下点线是方点而在IE/firefox下点线是圆点
border-style:none(默认)
border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9种)【边框宽度】 边框的宽度不能为负不能指定为百分比值。这是因为边框并不会因为设备尺寸变大所以百分比单位并不符合语义。类似地还有outline、box-shadow、text-shadow等 边框宽度支持3个关键字this/medium/thick分别是1px、3px、5px且medium为默认值。medium为3px是因为边框样式double至少为3px为有效果 border-width: thin/medium(默认)/thick/length【边框颜色】 默认的边框颜色是元素本身的前景色即元素的文本颜色如果元素没有任何文本则边框颜色是其父元素的文本颜色。但是在表格中若只设置border-style而不设置border,则边框颜色为黑色而不与文本颜色相同。类似地还有text-shadow、box-shadow等 border-color: transparent/color边框要点
【注意事项】 边框有以下几个要点需要特别注意 1、边框绘制在元素背景之上如果边框样式有某种缝隙可以通过这些缝隙看到元素的背景(有兼容问题) 2、同一元素的边框相交处是斜线可以用边框实现三角形 3、行内元素的上下边框由于不影响行高不影响布局左右边框会影响布局 4、在CSS2.1中背景定位background-position只能相对于左上角定位。如果需要是相对于右侧则可以使用一个右侧的透明边框来实现类似的效果
【边框单边】 border-top/border-right/border-bottom/border-left【边框属性】【四值顺序】 border-width: 1px 2px 3px 4px;//上右下左border-width: 1px 2px 3px;//上(左右)下border-width: 1px 2px;//(上下)(左右)border-width: 1px;//(上下左右)圆角边框 圆角边框border-radius可以为边框设置圆角(IE8-不支持)四值顺序是左上、右上、右下、左下
border-radius: none(默认)
border-radius: length{1,4}[/length{1,4}]?
//如果反斜杠存在前面的值是水平方向的半径后面的值是垂直方向的半径。如果没有则水平和垂直方向相等关于圆角边框有如下注意事项 1、length可以是具体值也可以是百分比但不是负数 2、重置border-radius没有圆角使用none无效需要取值0 3、border-radius对img没有任何效果 4、如果取值为百分比水平方向圆角百分比相对于宽度垂直方向圆角百分比相对于高度
【圆角单角】
border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius
border-top-left-radius: 10px 20px;[注意]写圆角单角时不可加/
【四值顺序】 四值顺序是左上、右上、右下、左下
border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;【内径外径】 border-radius内径 外径 - 对应的边框宽度 当border-radius半径值小于等于边框宽度时元素没有内径效果
【特殊图形】
圆形 元素的宽高相同且圆角半径为宽高的一半
div{width: 100px;height: 100px;border-radius: 50%;
}半圆 元素宽高不同且圆角半径与宽高要配合
div{width: 100px;height: 50px;border-radius: 50px 50px 0 0;
}
