CSS
边框属性
border-width 设置边框宽度
border-color 边框颜色
border-color:red green #000 yellow;(上右下左)
border-style:solid(实现)/dashed(虚线)/double(双线)/dotted(点状线) 边框线型
border 简写(任意排)
注:宽高为0时边框为正方形
CSS3
border-radius:length;
设置圆角边框,参数用数值或百分比。
正方形要设置成圆时,需把数值修改为高度或宽度的一般,或直接写成50%;
矩形时,设置为高度的一半就可以做两边为圆形。
为简写属性,
8个值 1 2 3 4 为左上x、右上x、右下x、左下x/左上y、右上y、右下y、左下y
4个值 1 2 3 4 为左上、右上、右下、左下
3个值为左上 右上左下 右下
2个值为左上右下 右上左下
1个值为四个角
分开写为border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;(不占用空间 ,不影响排列)
属性
h-shadow 必须,水平阴影的位置。允许负值
v-shadow 必须,垂直阴影的位置。允许负值
blur 可选,模糊距离。
spread 可选,阴影尺寸。
color 可选 阴影的颜色。
inset 可选 将外部阴影(outset)改为内部阴影。(不可写默认的outside,无效)
浏览器滚动条样式
滚动条样式设置
::-webkit-scrollbar {
width: 10px;
/*滚动条宽度*/
height: 10px;
/*滚动条高度*/
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
/*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: rgba(73, 240, 73, 0.734);
/*滚动条的背景颜色*/
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
/*滚动条的背景区域的圆角*/
background-color: rgba(64, 238, 226, 0.911);
/*滚动条的背景颜色*/
}