css属性
css 边框属性
border:
属性值 width 宽度
style 样式 solid(实线) dashed(虚线) dotted(点状线) double(双线)
color transparent(透明色)
none 取消边框
用css边框属性 制作一个三角形
div{
width: 0;
height: 0;
border: 30px solid ;
border-color: blue red gray orange;
border-bottom: none;
border-left:30px solid transparent;
border-right:30px solid transparent;
}
border 一个值 四个方向
border 两个值 上下 左右
border 三个值 上 左右 下
border 四个值 上右下左
css列表属性 ul ol dl
list-style-type
属性值 disc (实心圆) circle(空心圆) square(方块)
list-style-position
属性值 outside 在外面
inside 在里面
list-style-image
属性值 url(路径)
list-style
none 取消列表样式
css背景图
background
属性值 color 颜色
image url(路径) 插入背景图
repeat
no-repeat 不平铺
repeat-x 水平
repeat-y 垂直方向平铺
position 位置
水平 (left center right)
垂直(top center bottom)
attachment
fixed 固定
scroll 滚动
简写 background:color image repeat position;
背景图和 img插入图片的区别
背景图不占据空间 img属于html标签的一种占据空间
背景图用来渲染网页
jpg 通过改变像素点 缩小图片
gif 通过改变色彩 缩小图片 能透明 能动画
png 通过改变色彩 缩小图片 能透明 都是有损
盒模型
有里到外 内容 内填充 边框 外边距
1 padding属于 边框和内容之间 在盒子内部
2 padding是为了调整子元素在父元素之间的间距
3 padding 加了间距会把盒子撑大 要想让盒子保持不变 需要在原有的高度和宽度减去加上的间距
4 padding
left 左
right 右
top 上
bottom 下
5 padding 一个值 四周
两个值 上下 左右
三个值 上 左右 下
四个值 上右下左
6 padding 和背景图没有冲突
7 padding 不能设置负值
8 如果盒子没有固定的宽高 添加padding是不用减的
怎么用css边框属性做一个三角形
div{
width: 0;
height: 0;
border: 30px solid ;
border-color: blue red gray orange;
border-bottom: none;
border-left:30px solid transparent;
border-right:30px solid transparent;
}