怎样用css写出圆形边框

html-css010

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

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

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

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

为了达到更好的交互效果,提高用户友好度,对文本框输入框之类的美化工作是很必要的。一般的美化工作可以直接通过使用CSS完成,方法也十分简单,如下:1、首先制作一张输入框的背景图,如上图所示。2、添加按钮的Html代码:<input type=button class=Selectbg3、然后用css代码将它定义:<stylebody{font-size:12px }.Selectbg{border:nonewidth:150px height:20px background-image:url(image.gif) text-align:leftline-height:20px }</style在写CSS代码的时候要注意,如果背景图中带边框,一定要将输入框的边框去掉,否则会显示默认边框;其次还要将高度和行高定义好,否则点击输入框后文字的位置会很难看。