怎样用css写出圆形边框

html-css014

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="jquery.js"></script>

<style>

.{ padding:0 margin:0 list-style:none}

.htmlBox{ width:100% min-width:500px height:500px border:1px solid #A349A4 border-radius:5px}

.sskBox{ width:100% height:35px margin-top:150px border:1px solid #000 border-left:0 border-right:0}

.zc{ width:100px height:35px float:left}

.zj{ width:250px height:35px float:left border-left:1px solid #000 border-right:1px solid #000}

.yc{ height:35px float:right}

</style>

</head>

<body>

<div class="htmlBox">

 <div class="sskBox">

 <div class="zc">左边100</div>

 <div class="zj">中间250</div>

 <div class="yc">右边自适应</div>

</div>

</div>

</body>

<script>

tmntH()//加载的时候执行一次

$(window).resize(function() {tmntH()})//浏览器窗口变化时执行

function tmntH()

{

    var ycw=$(".sskBox").width()-352+'px'//yc的宽度等于sskBox宽度-350-2(边框线)

    //alert(div3)

    $(".yc").css("width",ycw)

    

}

</script>

</body>

</html>

.search/*整个搜索框*/{

width:300px

height:30px

background-image: url(../images/search.gif)/*这是这个搜索框的背景*/

background-repeat: no-repeat

background-position: 50%

margin-top: 10px

margin-right: 0px

margin-bottom: 0px

margin-left: 15px

padding: 0px

overflow: hidden

clear: both

}

.search input/*用来去掉搜索框里的文本框和按钮的背景和边框，并设置并列排放*/{

border:none

background:none

float:left

}

.search_box/文本框样式/{

width:150px

height:26px

line-height:26px

padding:0px

color:#999999

text-align:left

margin-top: 2px

margin-right: 15px

margin-bottom: 0px

margin-left: 10px

float: left

}

.search_button/*按钮样式*/{

width:45px

height:27px

cursor:pointer

color:#000000

font-size: 14px

}

具体样式可根据自己的需要调整。

希望对你有所帮助。