![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css的用法合集
TEA.YE
这个作者很懒,什么都没留下…
展开
-
css之媒体查询做屏幕适配
.原创 2022-10-24 17:06:45 · 933 阅读 · 1 评论 -
css之图片等比例均匀分布排列
图片随着伸缩跟着放大缩小,使占据的一行铺满css部分:* { box-shadow : inset 0 0 3px red }section { display: flex; flex-flow: wrap;}div { flex-grow; margin: 5px; position: relative; overflow: hidden;}img { position: absolute; left: 0; top: 0; display: block; w.原创 2022-02-24 18:52:35 · 1504 阅读 · 0 评论 -
css之照片墙-鼠标滑过图片放大且不超出容器宽度
如上图效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...原创 2022-02-18 10:39:34 · 496 阅读 · 0 评论 -
用less使页面随着屏幕放大缩小并用媒体查询
1.首先使less的使用方法:先准备以下文件:从这里去下载less.jsLess 中文网 也可以cdn引入2.在页面中引入less,需要标注 : rel="stylesheet/less",js引入需要放在 link 后面,如下图:3.在less文件中写样式,如下图:@rpx: 10rem;@media (min-aspect-ratio: 1920/1080) { html { font-size: calc(1000vh / 1080); ...原创 2021-11-17 15:06:13 · 587 阅读 · 0 评论 -
css文字底部效果
.title-bg { font-size: 36rpx; font-weight: bold; color: #000000; position: relative; z-index: 9; &::after { content: ''; z-index: -1; position: absolute; ...原创 2021-11-09 16:48:13 · 538 阅读 · 0 评论 -
css添加文字底部阴影效果
.title-circle-bg {position: relative;z-index: 1;font-size: 28rpx;font-weight: bold;color: #000000;text-align: center;&::before {content: “”;display: block;position: absolute;left: 50%;top: 50%;transform: translateX(-50%);z-index: -1;cli.原创 2021-11-04 16:35:02 · 877 阅读 · 0 评论 -
css的文本折行展示和溢出隐藏
一般情况只要定好文字所在容器的宽度文字就会折行,想控制一段文本不折行,设置如下的样式:white-space: nowrap;word-wrap: normal;word-break: keep-all;相反,如果一段文本不能折行了,那么可能是设置了如上的样式,则将样式改为white-space: normal;word-wrap: break-word;word-break: break-all;含有很长英文情况定好文字所在容器的宽度后文字不会折行,效果:.原创 2021-10-28 14:13:09 · 2314 阅读 · 0 评论 -
css之文字阴影效果
1.文字阴影文本阴影:原创 2021-10-28 09:17:51 · 488 阅读 · 0 评论