怎样用css写出圆形边框

html-css022

怎样用css写出圆形边框,第1张

1、首先打开sublime text编辑器,新建一个html文件,里面写入一个p标签:

2、然后设置p标签的样式,这里先设置一个边框,然后设置圆角边框,主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值,不可为负值,这里圆角的值越大,圆角的弧度也越大:

3、最后打开浏览器,就可以看到圆角边框了:

使用outline+outline-offset实现多重边框

如果我们只需要绘制两层边框,使用outline也可以做到。outline是border外面的一层,和border原理一样。通过设定outline的样式可以为border外面再设定一层边框。但是需要注意的是,outline属性设定的边框不会随着内部元素边界样式的变化而变化。也就是说,如果元素边框带了圆角,那么outline绘制出的最外层边框仍然是矩形的。这是outline绘制边框的一个缺憾。

css中加边框,首先我们需要确定你要加边框的元素的id或者是id,还有你必须保证这个元素是块级元素,不然width和height对它是无效的,自然也没边框,通过加display:block这个属性,来改成块级元素,具体看代码:

<html>

<head>

<style>

.div1{ //div本身就是块级,所以不需要,算span这中标签就是行级,所以需要display:block

width:600px

height:200px

font-size:13px

border:1px solid #f00

}

</head>

<body>

<div class='div1'>

</div>

</body>

</html>