用户界面样式
鼠标样式
当我们把鼠标放到盒子上去,可以有不同的样式,设置的属性为cursor
,其取值如下
值 | 效果 |
---|---|
default | 默认 |
pointer | 小手 |
move | 移动(表示可拖动的十字架) |
text | 文本(一根竖线) |
<ul>
<li style= "cursor: default">我是默认</li>
<li style= "cursor: pointer">我是小手</li>
<li style= "cursor: move">我是移动</li>
<li style= "cursor: text">我是文本</li>
</ul>
![](https://i-blog.csdnimg.cn/blog_migrate/1d4f343fde43a05dccd9dc1d5e639edf.gif)
轮廓outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。比如表单就有一个轮廓
<input type="text">
![](https://i-blog.csdnimg.cn/blog_migrate/8bf5cf305640c96c7f0de719795b2251.gif)
有没有看到外面的蓝色轮廓,设置轮廓线使用outline
属性,一般这样连写outline : outline-color || outline-style || outline-width
不过我们一般都不关心设置多少,一般都是直接去掉的。所以我们一般设置outline: 0px
或者outline: none
。
input {
outline: 0px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/8eafe9e569dc78f686be4d050d978af9.gif)
已经没有蓝色轮廓了。
文本域拖拽
我们写的文本域都是可以拖拽的
<textarea></textarea>
textarea {
width: 500px;
height: 100px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/840b23bd034241dde6b9e233eaa4366c.gif)
在实际的页面中这个都是不可以拖拽的,可以通过设置resize: none;
来进行设置。
resize: none;
![](https://i-blog.csdnimg.cn/blog_migrate/d8845a7a291778e93490417dea427a91.gif)
这个时候文本域不能够拖拽了。