有问题请指出,转载请标注,谢谢
常见的前缀
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,虽然是儿童节,但是已经过了那个年纪