css中如何去掉button(按钮)的边框

html-css025

css中如何去掉button(按钮)的边框,第1张

在css中,主要通过border属性的设置,实现去掉边框。以代码编辑器:zend studio 10.0为例,可参考以下步骤去掉button(按钮)的边框:

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

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

3、在test.html文件内,给button按钮添加一个id属性,用于样式的设置。

4、在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

5、在css标签中,通过id设置button的样式,定义其背景颜色为蓝色,文字颜色为白色,最后,将border属性设置为none,实现去掉button的边框。

6、在浏览器打开test.html文件,查看实现的效果。

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

为其添加两个伪元素

添加伪类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

float,css的一种属性,主要属性值为:left(左浮动)、none(不浮动)、right(右浮动)、inherit(继承父元素浮动),多用于网页排版。

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

扩展资料

CSS属性

1、整数和实数

在CSS中只能使用浮点小数,而不能像其他编程语言那样使用科学记数法表示实数,即1.2E3在CSS中将是不合法的。下面是几个正确的例子,整数:128、-313,实数:12.20、1415、-12.03。

2、长度量

相对长度单位有:em——当前字体的高度,也就是font.size属性的值;ex——当前字体中小写字母x的高度;Dx——一个像素的长度,其实际的长度由显示器的设置决定,比如在800木600的设置下,一个像素的长度就等于屏幕的宽度除以800。

3、百分数量(percentages)

百分数量就是数字加上百分号。显然,百分数量总是相对的,所以和相对长度量一样,百分数量不被子级元素继承。

参考资料来源:百度百科-CSS

参考资料来源:百度百科-FLOAT