18910140161

Css

首页 >> 前端开发 >> Css

[CSS]边框三角形 背景相关属性 雪碧精灵图 渐变

顺晟科技

2021-09-23 11:24:52

176

一、边框做三角形

div1是空元素
  1. #div1{
  2. width:0px;
  3. height:0px;
  4. border:25px solid transparent;
  5. border-top-color:#f00;
  6. }
  二、盒模型 1.margin：三个值，上，左右，下   三、背景
1.background-color:填充元素的内容、内边距、边框区域   2.background-img:url("images/1.png");   3.background-repeat: 取值：repeat、repeat-x、repeat-y、no-repeat   4.background-size: 取值：value1 value2：宽 高             value1% value2%:百分比               cover:覆盖，显示区域全覆盖，有可能图片显示不完整
             contain:包含，有一条边碰到就停止缩放。图片一定会完整显示，但可能不会覆盖所有显示区域   5.background-attachment(背景图固定)： 取值：scroll:默认，不固定            fixed:固定   6.background-position(背景定位): 取值：x y ，x水平偏移位置（右为正），y垂直偏移位置（下为正），可负值           x%  y%，相对于所在元素的宽高比例，多用于图像居中          left right center top bottom   7.雪碧图制作: a.测量icon尺寸，创建显示区域 b.背景图设置background-image c.测量并设置偏移：icon往上往左   8.background-clip(背景剪裁)：背景从哪儿开始剪裁 取值：border-box:默认，剪裁到边框            padding-box            content-box   9.background-origin背景定位区域：背景从哪儿开始画 取值：border-box:默认            padding-box            content-box

四、渐变 属性：background-image处理 取值：linear-gradient：线性渐变           radial-gradient：径向渐变          repeating-linear-gradient：重复线性渐变          repeating-radial-gradient：重复径向渐变   1.线性渐变： background-image:linear-gradient(angle,color-point...) angle:渐变方向或角度：to top、to bottom、to left、to right，0deg，90deg ... color-point：表示颜色的起始点、过渡点、结束点 例：从上往下，实现红色0%，到绿色50%，到蓝色渐变
  1. background-image:linear-gradient(to bottom,red 0%,green 50%,blue );
  2.径向渐变： radial-gradient([size at position],color-point...) size:圆的半径 position:圆心出现的位置，默认为元素的中心 例：圆心在左上方，红0%，绿50%，蓝
  1. background-image:radial-gradient(200px at top left,red 0%,green 50%,blue );
  3.渐变的浏览器兼容 forefox:-moz- chrome、safari：-webkit- opera:-o-
上一篇：css精灵钢性铸铁雪碧图生成工具 下一篇：测试开发之前-CSS CSS层叠样式
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！