css样式选取框

html-css025

css样式选取框,第1张

用了JQ库,样式在style里,不过要配合js用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="jquery-3.3.1.min.js"></script>

</head>

<style>

.div1{

text-align: center

background: beige

width: 50px

height: 28px

border-radius: 14px

}

.span1{

/* margin-top: 7px*/ /* div的时候打开注释 */

background: #CCCCCC

width: 13px

height: 13px

display: inline-block

border-radius: 7px

}

.div2{

text-align: center

background: lawngreen

width: 50px

height: 28px

border-radius: 14px

}

.span2{

background: white

width: 13px

height: 13px

display: inline-block

border-radius: 7px

}

.hid1{

display: none

}

.hid2{

}

</style>

<body>

<!-- button的 -->

<button class="div1">

<span class="hid1">是</span>

<span class="span1"></span>

<span class="hid2">否</span>

</button>

<hr>

<hr>

<!-- div的 -->

<!-- <div class="div1">

<span class="hid1">是</span>

<span class="span1"></span>

<span class="hid2">否</span>

</div>-->

</body>

<script>

$(function(){

$(".div1").click(function(){

$(".span1").toggleClass("span2")

$(".div1").toggleClass("div2")

$(".hid1").toggle()

$(".hid2").toggle()

})

})

</script>

</html>

<input id="txt1" type="text" value="sssssssssssss"> input {

 color: #122e29

 border: 1px solid #005344

 background-color: #73b9a2

}

input:focus {

 color: #ed1941

 border: 1px solid #2468a2

 background-color: #afdfe4

}

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

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

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