12-1-CSS 常用样式属性

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

• CSS 常用样式属性
• • 1 CSS 三角形
  • 2 CSS 用户界面样式
  • • 2.1 什么是界面样式
    • 2.2 鼠标样式 cursor
    • 2.3 轮廓线 outline
    • 2.4 防止拖拽文本域 resize
  • 3 CSS 阴影
  • • 3.1 盒子阴影
    • 3.2 文字阴影
  • 4 透明度（opacity 与 rgba）
  • 5 vertical-align（了解）
  • 6 CSS content 计数器（了解）

CSS 常用样式属性

1 CSS 三角形

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：

div {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;
    border-left-color: red;
}

案例：提示框

2 CSS 用户界面样式

2.1 什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

2.2 鼠标样式 cursor

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

2.3 轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }

2.4 防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea{ resize: none;}

3 CSS 阴影

3.1 盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

取值：

注意：

1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
2. 盒子阴影不占用空间，不会影响其他盒子排列。

3.2 文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

语法：

text-shadow: h-shadow v-shadow blur color;

取值：

4 透明度（opacity 与 rgba）

在 CSS 中，我们可以使用 opacity 属性设置盒子透明度。

语法：

opacity: value;

取值：

5 vertical-align（了解）

CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align : baseline | top | middle | bottom

取值：

x-height：小写英文字母x的高度。

x-height / 2：x字母在一行的一般的高度，中线就是以 x-height / 2 处为参考标准。

（掌握）图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

解决办法：

• 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
• 把图片转换为块级元素 display: block;

6 CSS content 计数器（了解）

CSS 计数器通过一个变量来设置，根据规则递增变量。

• counter-reset - 创建或者重置计数器，从0开始
• counter-increment - 递增变量
• content - 插入生成的内容
• counter() 函数 - 将计数器的值添加到元素