rounded-box { border-radius: 10px; } /* 示例4:使用边框图片 */ .fancy-border { border-image-source: url('fancy-border.png'); border-image-slice: 30; border-image-width: 30px; border-image-outset: 0; border-image-repeat: round; } 结语 CSS的border属性及其相关扩展为我们提供了...
方法/步骤 1 CSS3属性中有许多边框属性,主要的有三个参数：border-image边框装饰图片border-radius边框半径box-shadow:盒子阴影具体来介绍上面的三个 2 border-radius:Rpx 是以顶角为中心，以R为半径绘制圆角 3 上面的一个值代表四个角相同,也可以单独设置边角border-top-left-radius:2em; 左上角bo...
border-top-right-radius: 60px 120px; //右上角 border-bottom-left-radius: 60px 120px; //左下角 border-bottom-right-radius: 60px 120px; //右下角 1. 2. 3. 4. 复合写法: border-radius: 60px/120px; //参数:水平半径/垂直半径 border-radius: 20px 60px 100px 140px; //从左上开始...
一、属性描述 属性 描述 border 复合属性。设置对象边框的特性。 outline 复合属性。设置或检索对象外的线条轮廓。 border-radius 设置或检索对象使用圆角边框。 border-image 设置或检索对象的边框样式使用图像来填充。 box-shadow 向方框添加一个或多个阴影
border-image-source:url(imageurl);/*image url可以是相对地址也可以是绝对地址*/ border-image-source跟CSS2中background-image属性相似,也是通过url()调用背景图片,图片的路径可以是相对地址也可以是绝对地址,当然你不想使用背景图片你也可以把值设置为none,即:border-image:none;其默认值就是none。
1>border-image-source:设置图片的来源。使用绝对或者相对地址或者渐变色来确定图片。 2>border-image-slice :设置边框背景图的分隔方式。取值:数值/百分比 fill.该属性指定从上右下左来分割图片,将图像分成4个角,4条边以及中间区域。中间区域始终是透明的,除非使用关键字fill。
这个属性还可以实现圆角边框,这个圆角效果是border-radius无法改变的。该属性是border-image-source和border-image-slice属性的缩写。如果border-image-width关键字为auto的话,会将-slice这个属性的尺寸作为九宫格的宽度值。
读到书中介绍border-radius的内容时,提到了传说中的九宫格技术,其相关介绍只有可怜的不到一页。九宫格技术所使用的CSS属性就是我们今天的主角border-image。虽然这一技术确如书中所说,很少被使用了。但是歪马突然想起自己曾经为了实现某个效果折腾了很久,而这刚好适合用border-image来实现。
image.png 拿border-top-left-radius来说, 它定义了左上角的圆角半径, 包括左上角左侧的边的圆角, 右侧边的圆角, 设置一个值的时候, 二者相同, 两个值的时候, 各用各的。 最后, 还可以这么写: border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; ...
<head><style>div{width:200px;height:100px;border:2pxsolidred;border-radius:100px;}</style></head><body><div>边框圆角</div></body> (6)图片边框 简写属性: border-image:border-image-sourceborder-image-slice/border-image-width/border-image-outsetborder-image-repeat<head><style>div{width:10...