css如何设置方形单选按

html-css022

css如何设置方形单选按,第1张

1、新建一个html文件,命名为test.html,用于讲解。

2、在test.html文件中,使用button标签创建一个按钮。

3、在test.html文件中,设置button标签的class属性为mybtn。

4、在css标签内,通过class定义button的样式,设置它的宽度为50px,高度为50px,实现正方形。

5、在css标签内,再设置在设置忽略按钮的背景颜色为红色,文字颜色为白色,按钮无边框。

6、在浏览器打开test.html文件,查看实现的效果。css是一种用来表现HTML或XML等文件样式的计算机语言,是描述标记语言页面格式的标准。

固定尺寸就好做

<div style="background-color:#CCCCCC width:200px height:200px position:relative">

<div style=" height:30px width:120px position:absolute top:calc(50% - 15px) left:calc(50% - 60px) line-height:30px background-color:#FFFFFF">

<span>查找</span> <span>替换</span> <span>删除</span>

</div>

</div>

<br />

<br />

<div style="background-color:#CCCCCC width:200px height:115px padding-top:85px">

<div style=" height:30px width:120pxmargin-left:40px line-height:30px background-color:#FFFFFF">

<span>查找</span> <span>替换</span> <span>删除</span>

</div>

</div>

<br />

<br />

<div style="background-color:#CCCCCC width:200px height:200px">

<div style=" height:30px width:120px line-height:30px float:left margin-left:40px margin-top:85px background-color:#FFFFFF">

<span>查找</span> <span>替换</span> <span>删除</span>

</div>

</div>

css里面有个属性叫clip-path,可以把长方形的css元素切割为不规则图形,点击响应的区域也只有切割后的图形才能响应。因此可以利用这个属性生成一下简单的图形。有个工具可以帮助我们生成不规则图形,地址:

借助这个工具,我们就能生成各种简单图形了,比如:

箭头:

向右的箭头:

关闭的叉:

三角形箭头:

注意:iOS浏览器iOS7以上支持,android浏览器4.4以上支持。opera浏览器全部不支持。iE全部不支持。