- 常用属性
- background-color 设置背景颜色
background-color: #F4F4F4;
- line-height 设置文字在元素中垂直居中,将值设置为height的值
height:24px; line-height:24px;
- font-size 设置文字大小
font-size:14px;
- color 设置文字颜色
color:red;
- text-decoration: none; 设置文字下划线不显示
- background-color 设置背景颜色
- 盒子大小
默认情况下盒子的可见大小由内容区、内边距、边框构成。
box-sizing 可以设置盒子的大小计算方式
可选值:- content-box
默认值。width和height设置的大小只是内容区,盒子的可见大小还得加个内边距和边框。 - border-box
盒子大小可见大小由width和height设置,它里面包含边框、内边距、内容区。
- content-box
- outline
与边框相似,用来显示元素的轮廓线。只是它不会改变页面的布局,通常用于鼠标移入元素时显示。outline:solid 10px red;
- boxshaow
用来设置元素的阴影。设置阴影不会改变页面的布局
参数一表示水平偏移。正数向右移动,负数向左移动。
参数二表示垂直偏移。正数向下移动,负数向左移动。
参数三表示模糊(羽化)程度。只能为正值,数值越大效果越大(可选)
参数四设置阴影的颜色。box-shadow: 10px 10px 30px rgba(0, 0, 0, .3);
- border-radius
由于css元素是一种盒子模型,所以4角是方的。
可以通过border-radius属性设置圆的半径。使方角变成圆角
还可以设置单个角的圆角状态。
可以设置4个角的值,设置的位置为左上角、右上角、右下角、左下角
当值相同时,可以只写一个
一个角可以设置两个值:水平与垂直的像素border-radius: 10px 20px 30px 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px 20px;
当一个角中水平与垂直的值一样时,圆角为正圆,当值不同时圆角为椭圆
css属性与盒子大小
最新推荐文章于 2023-12-21 20:44:59 发布