Web开发

首页 » 常识 » 常识 » web前端开发常用CSS样式汇总三
TUhjnbcbe - 2024/5/10 16:15:00
甘露聚糖肽注射液 https://m-mip.39.net/baidianfeng/mipso_4329292.html

36、文字渐变效果实现

divclass="text_signature"有课前端网,一个专门学习前端知识的网站/div

style

.text_signature{

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-image:linear-gradient(toright,#ec,#40a4e2,#ea96f5);

width:px;

}

/style

37、好看的边框

divclass="text_shadow"/div

style

.text_shadow{

width:px;

height:px;

box-shadow:0px0px13px1pxrgba(51,51,51,0.1);

}

/style

38、外观的渐变

divclass="text_gradient"/div

style

.text_gradient{

width:px;

height:px;

background:linear-gradient(25deg,rgb(79,,),rgb(98,,),rgb(,,),rgb(92,,))rgb(,,);

}

/style

39、实现立体字的效果

divclass="text_solid"爱创课堂,一个专门学习前端知识的网站/div

style

.text_solid{

font-size:32px;

text-align:center;

font-weight:bold;

line-height:px;

text-transform:uppercase;

position:relative;

background-color:#;

color:#fff;

text-shadow:

0px1px0px#c0c0c0,

0px2px0px#b0b0b0,

0px3px0px#a0a0a0,

0px4px0px#,

0px5px10pxrgba(0,0,0,0.6);

}

/style

40、全屏背景图片的实现

.swper{

background-image:url(./img/bg.jpg);

width:%;

height:%;//父级高不为%请使用vh

zoom:1;

background-color:#fff;

background-repeat:no-repeat;

background-size:cover;

-webkit-background-size:cover;

-o-background-size:cover;

background-position:center0;

}

41、实现文字描边的2种方法

方式一:

.stroke{

-webkit-text-stroke:1pxgreenyellow;

text-stroke:1pxgreenyellow;

}

方式二:

.stroke{

text-shadow:#px00,#0px0,#-1px00,#0-1px0;

-webkit-text-shadow:#px00,#0px0,#-1px00,#0-1px0;

-moz-text-shadow:#px00,#0px0,#-1px00,#0-1px0;

*filter:Glow(color=#,strength=1);

}

42、水流的实现

.dom{

opacity:0.4;

filter:alpha(opacity=40);/*IE8及其更早版本*/

}

使用rgba()设置颜色颜色

.demo{

background:rgba(,0,0,1);

}

说明:RGBA是代表红色(红色)绿色(绿色)蓝色(蓝色)和Alpha(不知道)三个字母的缩写。

43、解决1px边框变粗的问题

.dom{

height:1px;

background:#dbdbdb;

transform:scaleY(0.5);

}

Ps:出现1px变粗的原因,比如在2倍屏时1px的像素对应2个物理像素。

44、CSS不同的单位的大脑

css自己也能够进行简单的运算,主要是实现了计算这个函数。

.div{

width:calc(%-50px);

}

45、CSS实现文字模糊

.vague_text{

color:transparent;

text-shadow:#115px;

}

46、通过彩色图标变灰

一张彩色的图片实现了,移出变灰的效果。

ahref=class=iconimgsrc=01.jpg//a

style

.icon{

-webkit-filter:grayscale(%);

-moz-filter:grayscale(%);

-ms-filter:grayscale(%);

-o-filter:grayscale(%);

filter:grayscale(%);

filter:gray;

}

.icon:hover{

filter:none;

-webkit-filter:grayscale(0%);

}

/style

47、图片object-fit

当图片带不固定时间,想要让图片整体,一般都用background-size:cover/contain,但这个只适用于背景图。缩放的问题。使用的提前条件:图片的父级容器宽高。

img{

width:%;

height:%;

object-fit:cover;

}

填充:默认值。内容拉伸填满整个内容框,不保证保持原有的比例。

包含:边保持边长和长度中的那条长度,等比缩放,可能会留白。

封面:保持原有的空间长度。宽度和高度中长度一致,长的部分等比缩放。可能部分区域不可见。(经常)

无:保持原有的保留比例。保持同时替换内容的原始尺寸大小。

按比例缩小:保持原有尺寸大小,如果容器尺寸较大,图片内容尺寸不变,保持图片的尺寸不变,不会放大缩小;容器尺寸较小的图片内容尺寸不变,最能容纳。

48、行内标签元素出现空白问题

方式一:父级font-size设置为0

.father{

font-size:0;

}

方式二:父元素上设置word-spacing的有合适的值

.father{

word-spacing:-2px

}

其他方案:1将行内元素写为1行(会影响布局);2行(会影响布局)。

49、解决vertical-align属性不生效

在使用vertical-align:middle实现垂直居中的时候,经常会发现不生效的情况。

作用环境:父元素设置line-height。需要和高度一致。将显示属性设置为表格单元,将块元素转化为单元格。

作用对象:子元素中的inline-block和inline元素。

divclass="box"

imgsrc=".\test.jpg"/

span内部文字/span

/div

style

.box{

width:px;

line-height:px;

font-size:16px;

}

.boximg{

width:30px;

height:30px;

vertical-align:middle

}

.boxspan{

vertical-align:middle

}

/style

Ps:垂直对齐不可继承,必须对子元素单独设置。同时需要注意的是线高的高度基于字体大小(即字体的高度),如果文字要转行会出现异常哦。

1
查看完整版本: web前端开发常用CSS样式汇总三