css如何设置方形单选按

html-css046

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等文件样式的计算机语言,是描述标记语言页面格式的标准。

定义一个如图所示的矩形按钮

为其添加两个伪元素

添加伪类hover:

transition 属性是一个简写属性,用于设置四个过渡属性:

transition-property:规定设置过渡效果的 CSS 属性的名称。

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-timing-function:规定速度效果的速度曲线。

transition-delay:定义过渡效果何时开始。

tips:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

transition-timing-function:

伪元素默认的宽高为0,当鼠标悬浮时候,设置一定的过渡时间使其宽高为100%。

上述demo中:

在0.2s内 border-top-color变化,border-right-color推迟0.2s之后完成一个0.2s的过渡。

同理border-bottom-color推迟0.4s,border-left-color推迟0.6s.

demo