![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
css3 基本选择器
css3 之前的基本选择器: 通配符选择器、元素选择器、类选择器、ID选择器、后代选择器。 css3 新增基本选择器: 子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器 子元素选择器 - 只能选择某元素的子元素(不包含所有后代,至选择下一代) 父元素 > 子元素 相邻兄弟元素选择器 - 可以选择在一个元素后的元素,而且它们具有一个相同的父元素 元素 +...原创 2018-07-29 21:55:36 · 253 阅读 · 0 评论 -
css3 transform简介 3D
css 3d 转换 rotate3d() , translate3d() , scale3d() , perspective() 三个方向: 旋转 rotateX X轴上的旋转 语法 transform: rotateX(<angle>) 真的是以元素中心为原点的绕x 轴旋转效果哇! <style type="text/c...原创 2018-10-30 22:32:39 · 180 阅读 · 0 评论 -
去掉input 自动完善功能
chrome 浏览器,总是会给以前使用过的 input 记录下输入值,当以后再次输入时,就会提示。 关掉这种提示的方法: 给 form 或者input 加入属性 autocomplete ,并设值为 “off”. 相反,将该值设为“on” 就是打开这一属性。 ...原创 2018-10-16 15:21:00 · 410 阅读 · 0 评论 -
css3 transform简介 2D
css3 的变形属性 transform 它使得元素在一个坐标系统中变形。这个属性包含一系列变形函数,可以移动、旋转和缩放元素。 语法 transform: none | <transform-function> [<transform-function>]* 默认值 transform:none 兼容性 IE10+、FireFox16、Chrome36、Sa...原创 2018-10-18 23:36:55 · 137 阅读 · 0 评论 -
css3 渐变
渐变分为:线性渐变,径向渐变。 css3 渐变: IE10+,chrome26+(10.0 加上-webkit-),firefox16+(3.6 -moz-),safari6.1+(5.1 -webkit-),opera12.1+(11.6 -o-) 线性渐变 linear gradients 语法:linear-gradient(direction,color-stop1,color...原创 2018-09-02 17:35:27 · 415 阅读 · 0 评论 -
背景图像大小 与 多重背景图片
background-size 属性(IE9+ Firefox4+ chrome safari5+ opera) 该属性指定背景图片大小 语法: background-size: length|percentage|cover|contain 多重背景图片(前面一张图会遮住后面一张图) background-image: url(" .png"),url(" .jpg")...原创 2018-08-02 21:50:19 · 615 阅读 · 0 评论 -
背景图像区域 与 背景图像定位
background-clip 属性(IE9+,其他都兼容) 该属性指定了背景图像的绘制区域 语法: background-clip: border-box|padding-box|content-box; 其中,border-box 为背景裁剪到边框盒(边框、内边距、内容都显示背景图片),padding-box为背景裁剪到内边距框(内边距、内容都显示背景图片),content-box为背...原创 2018-08-02 21:32:46 · 1175 阅读 · 0 评论 -
CSS3 圆角 盒阴影 边界图片
border-radius 属性 一个最多可指定四个border-*-radius属性的复合属性,该属性允许为元素添加圆角边框。 当值为百分比时,将圆滑长宽的百分比(50%时为圆或椭圆) <!DOCTYPE html> <html> <head> <title>ds</title> <style type="text/c...原创 2018-07-31 16:55:12 · 329 阅读 · 0 评论 -
css 伪元素
CSS 伪元素用于向某些选择器设置特殊效果 语法 元素::伪元素 (Element::pseudo-element) 伪元素——Element::first-line 根据“first-line”伪元素中的样式对Element元素中的第一行文本进行格式化 说明:“first-line”伪元素只能用于块级元素 <!DOCTYPE html> <htm...原创 2018-07-31 16:20:15 · 206 阅读 · 0 评论 -
css 权重
选择一个元素,设置它的样式,可以通过:class,元素名,id,属性,伪类。 当很多规则被应用到同一个元素时,权重决定了哪种规则生效、优先级。 权重等级与权值 行内样式(1000)> ID选择器(100)> 属性和伪类选择器(10)> *(0)...原创 2018-07-31 15:45:53 · 815 阅读 · 0 评论 -
transform与坐标系统
默认元素transform 的旋转、缩放、平移、斜切的坐标系统的原点为该元素的几何中心。 transform-origin 属性 transform-origin 属性允许更改转换元素的位置,即原点。 语法 transform-origin: x-axis y-axis z-axis; 2d 中去掉 z-axi 即可。 <style type="text/css"> ...原创 2018-10-30 22:41:59 · 1061 阅读 · 0 评论