css3
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
css3 基本选择器
css3 之前的基本选择器: 通配符选择器、元素选择器、类选择器、ID选择器、后代选择器。css3 新增基本选择器: 子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器 子元素选择器 - 只能选择某元素的子元素(不包含所有后代,至选择下一代)父元素 > 子元素相邻兄弟元素选择器 - 可以选择在一个元素后的元素,而且它们具有一个相同的父元素元素 +...原创 2018-07-29 21:55:36 · 240 阅读 · 0 评论 -
css3 transform简介 3D
css 3d 转换rotate3d() , translate3d() , scale3d() , perspective()三个方向: 旋转 rotateXX轴上的旋转语法transform: rotateX(<angle>)真的是以元素中心为原点的绕x 轴旋转效果哇! <style type="text/c...原创 2018-10-30 22:32:39 · 172 阅读 · 0 评论 -
去掉input 自动完善功能
chrome 浏览器,总是会给以前使用过的 input 记录下输入值,当以后再次输入时,就会提示。关掉这种提示的方法:给 form 或者input 加入属性 autocomplete ,并设值为 “off”.相反,将该值设为“on” 就是打开这一属性。 ...原创 2018-10-16 15:21:00 · 387 阅读 · 0 评论 -
css3 transform简介 2D
css3 的变形属性 transform它使得元素在一个坐标系统中变形。这个属性包含一系列变形函数,可以移动、旋转和缩放元素。语法transform: none | <transform-function> [<transform-function>]*默认值transform:none兼容性IE10+、FireFox16、Chrome36、Sa...原创 2018-10-18 23:36:55 · 133 阅读 · 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 · 325 阅读 · 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 · 607 阅读 · 0 评论 -
背景图像区域 与 背景图像定位
background-clip 属性(IE9+,其他都兼容)该属性指定了背景图像的绘制区域语法:background-clip: border-box|padding-box|content-box;其中,border-box 为背景裁剪到边框盒(边框、内边距、内容都显示背景图片),padding-box为背景裁剪到内边距框(内边距、内容都显示背景图片),content-box为背...原创 2018-08-02 21:32:46 · 1155 阅读 · 0 评论 -
CSS3 圆角 盒阴影 边界图片
border-radius 属性一个最多可指定四个border-*-radius属性的复合属性,该属性允许为元素添加圆角边框。当值为百分比时,将圆滑长宽的百分比(50%时为圆或椭圆)<!DOCTYPE html><html><head> <title>ds</title> <style type="text/c...原创 2018-07-31 16:55:12 · 324 阅读 · 0 评论 -
css 伪元素
CSS 伪元素用于向某些选择器设置特殊效果语法元素::伪元素 (Element::pseudo-element) 伪元素——Element::first-line根据“first-line”伪元素中的样式对Element元素中的第一行文本进行格式化说明:“first-line”伪元素只能用于块级元素<!DOCTYPE html><htm...原创 2018-07-31 16:20:15 · 201 阅读 · 0 评论 -
css 权重
选择一个元素,设置它的样式,可以通过:class,元素名,id,属性,伪类。当很多规则被应用到同一个元素时,权重决定了哪种规则生效、优先级。权重等级与权值行内样式(1000)> ID选择器(100)> 属性和伪类选择器(10)> *(0)...原创 2018-07-31 15:45:53 · 810 阅读 · 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 · 1041 阅读 · 0 评论