css中repeat 和 round 的区别

html-css08

css中repeat 和 round 的区别,第1张

css中no-repeat一般用在元素backgroud-repeat的设置中,含义为不平铺;

一般与background-image 一起使用;

此图片做背景时不平铺;

另外还有几个其他值:

repeat:平铺

repeat-x:横向平铺

repeat-y:纵向平铺

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

代码实例:border-radius: 15px

1、把下列代码添加进入你的<style>标签内

2、清空缓存,看看效果吧(部分IE版本可能不支持)

预览

总结

这是个很实用的方法,可以让图片看起来更「精巧」一些

在正式绘制边框前,我们先认识一下CSS3 border-image-slice 属性,它可以将border-image-source获取的边框背景图片切割为9份。语法如下:

border-image:border-image-source slice-width{1,4}

slice-width的值可以是具体像素,也可以是百分比。切割后的图片块分别是

border-top-left-image border-top-image border-top-right-image

border-left-image border-right-image

border-bottom-left-image border-bottom-image border-bottom-right-image

其中,border-top-image和border-bottom-image区域受到水平方向效果影响,如果是repeat则此区域图片会水平重复,如果是round则会水平平铺,责任stretch则被水平拉升。而我们设置虚线,则选择repeat/round都可以。