css样式,了解一下

---

有问题请指出,转载请标注,谢谢

---

常见的前缀
Firefox的-moz-
IE的-ms-
Opera的-a-
Safari和Chrome的-wekit-

---

动画css-animations
盒子布局css-flexbox
遮罩css-masking
变形css-transforms
滤镜filter-effects
图像混合compositing

---

当某些值相互依赖时,应该把他们的相互关系用代码表达出来
font-size:20px;
line-height:1.5;

.em会依赖字号进行缩放

---

继承 inherit这个关键字:绑定到父元素的计算值,与其他元素相同
font:inherit;

---

响应式网页设计Responsive Web Design RWD

使用百分比取代固定长度
为替换元素设置max-width:100%

---

css预处理器Sass LESS

背景和边框

background-position 相对于背景偏移量
默认情况想以padding box为准的
calc() 计算函数 calc(100%-20px)

边框内圆角

box-shadow会刚好填补描边和容器圆角之间的空隙

渐变

background: linear-gradient(#fb3 30%, #58a 70%)
background-size 来调整尺寸

background:linear-gradient (to right, #fb3 30%, #58a 70%) 垂直条纹
background:linear-gradient (45deg , #fb3 30%, #58a 70%) 斜向条纹

伪随机背景

background: hsl(20, 40%, 90%); background-image:
    linear-gradient(90deg, #fb3 10px, transparent 0),
    linear-gradient(90deg, #ab4 20px, transparent 0),
    linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

各层背景图像以不同间距重复数次后再次统一对齐
实际上就是最小公倍数240 (40 60 80 )

连续图像边框

background-clip 默认值是padding-box

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg,
              red 0, red 12.5%,
              transparent 0, transparent 25%,
              #58a 0, #58a 37.5%,
              transparent 0, transparent 50%)
0 / 5em 5em;

border-image-slice 属性中使用边框厚度指定为像素单位

自适应的椭圆

border-radius属性的基本用法

background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; 

设置固定宽高一般的px就会得到一个圆形
设置四个属性时, 是顺时针旋转

平行四边形

skew()的变形属性来对矩形进行斜向拉伸

transform: skewX(-45deg);

在对容器内的元素进行一次变形,就可以抵消容器的变形

菱形

transform:rotate (45deg)
max-width:100% 让图片的宽度与容器的对角线相等,不是与边长相等

切角效果

background:
    linear-gradient(-45deg, transparent 15px, #58a 0);

梯形

transform: perspective(.5em) rotateX(5deg);

.tab {
position: relative; display: inline-block; padding: .5em 1em .35em; color: white;
}
.tab::before {
content: ''; /* 用伪元素来生成一个矩形 */ position: absolute;
top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
}

scaleY()变形属性
使用transform-origin:bottom 当在3d空间中旋转时,可以把它的底边固定住

滤镜

img {
transition: .5s filter;
filter: sepia(1) saturate(4) hue-rotate(295deg);
}
img:hover, img:focus {
filter: none; }

毛玻璃效果

background: hsla(0,0%,100%,.3);

折角效果

background: #58a; /* 回退样式 */ background:
    linear-gradient(-135deg, transparent 2em, #58a 0);

background:
linear-gradient(to left bottom,
        transparent 50%, rgba(0,0,0,.4) 0)
        no-repeat 100% 0 / 2em 2em;

字体排印

hyphens: auto;  //断词折行

padding: .5em; //文本行的斑马条
line-height: 1.5;
background: beige; background-image: linear-gradient(
rgba(0,0,0,.2) 50%, transparent 0); background-size: auto 3em;

自定义下划线

background: linear-gradient(gray, gray) no-repeat; 
background-size: 100% 1px;
background-position: 0 1.15em;

background: linear-gradient(90deg, //避开字母长的部分
gray 66%, transparent 0) repeat-x;
background-size: .2em 2px; background-position: 0 1em;

凸版印刷文字效果

background: hsl(210, 13%, 60%); color: hsl(210, 13%, 30%);

background: hsl(210, 13%, 40%); color: hsl(210, 13%, 75%); text-shadow: 0 -1px 1px black;

文字外发光效果

a{  //需要浏览器支持text-shadow 属性
background: #203; color: white; transition: 1s;
} a:hover {
text-shadow: 0 0 .1em, 0 0 .3em; }

扩大可点击区域

border: 10px solid transparent;
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; background-clip: padding-box;

通过阴影来弱化背景

.overlay { /* 用于遮挡背景 */ 
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.lightbox { /* 需要吸引用户注意的元素 */
position: absolute; z-index: 1;
/* [其余样式] */
}

body.dimmed::before { position: fixed; top: 0;
right: 0; // 使用伪元素来消除额外的HTML元素
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}

通过模糊来弱化背景

<main>Bacon Ipsum dolor sit amet...</main> <dialog>
    O HAI, I'm a dialog. Click on me to dismiss.
</dialog>
<!-- 其他对话框都写在这里 -->
main {
transition: .6s filter;
}
main.de-emphasized { filter: blur(5px);
}

main.de-emphasized {
filter: blur(3px) contrast(.8) brightness(.8);
}

图片对比效果

.image-slider { position:relative; display: inline-block;
}
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%; /* 初始宽度 */
overflow: hidden; /* 让它可以裁切图片 */
}
.image-slider img { display: block; }

自适应内部元素

width 和height 定义了一些新的关键字 min-content
这个关键字讲解析为这个容器内部最大的不可断行元素的宽度

满幅的背景定宽的内容

footer {
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333; }

垂直居中

main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0; transform: translateY(-50%);
}

基于flexbox

body {
display: flex;
min-height: 100vh;
margin: 0; }
main {
margin: auto;
}

过渡动画,就不写了,用的不是很多,其实也用到了,用第三方的UI框架,
对这部分的需求不是太严格,第三方基本满足

沿路径平移动画

<div class="path">
<div class="avatar">
<img src="lea.jpg" /> </div>
</div>

@keyframes spin {
to { transform: rotate(1turn); }
}
@keyframes spin-reverse {
from { transform: rotate(1turn); } }
.avatar {
animation: spin 3s infinite linear; transform-origin: 50% 150px; /* 150px = 路径的半径 */
}
.avatar > img {
animation: spin-reverse 3s infinite linear; }
}

题外话
其实
不知道学什么
也不是没有目标和方向
一边工作还要学习
工作中需要的东西还有很多不会
额外的还要学习东西
时间精力都不够用了
还是说工作本身就有问题
杂乱不专
需要什么就去干
没有任何选择的余地
为了完成任务
就需要学习相关的东西来实现
都是浅尝辄止
来不及深入就要开始下一个任务了
还是自身的执行力和毅力不够
不能够规律自己生活
完成学习计划
无人指导就要走好多弯路浪费更多的时间

算了,或许时间会解决一切吧

20180601,虽然是儿童节,但是已经过了那个年纪