css样式,了解一下

深碍√TFBOYSˉ_ 2021-09-15 12:48 374阅读 0赞

--------------------

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

--------------------

常见的前缀  
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,虽然是儿童节,但是已经过了那个年纪