css
关注
分享
扫一扫
css
云烟溪雪
这个作者很懒，什么都没留下…
展开
-
css 设置字体小于12px
避免不支持 CSS3 浏览器的情况，我们也可以通过降级处理，将字体变回12px；最后兼容 IE：*font-size:10px;原文链接：https://blog.youkuaiyun.com/u014678583/article/details/105075017/转载 2023-04-09 13:30:56 · 337 阅读 · 0 评论 -
HTML+CSS 鼠标悬停发光按钮
在b站上看的小视频，看着按钮悬停发光效果很好，写的描述很清楚。效果图index.html代码<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML+CSS 鼠标悬停发光原创 2021-01-01 15:52:39 · 2415 阅读 · 1 评论 -
css实现超出部分显示省略号，css实现字母自动折行
css实现超出部分显示省略号显示一行，省略号 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; /* 不换行，超出部分隐藏且以省略号形式出现*/显示两行，省略号 text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-原创 2020-12-18 21:11:48 · 668 阅读 · 1 评论 -
快速把网站变成纯灰度显示，filter的使用
在html标签加上原文链接：https://blog.youkuaiyun.com/dickence/article/details/105303746原创 2020-06-12 14:08:19 · 396 阅读 · 0 评论 -
css3 新特性
1.Css text-intent属性：段落首行缩进将段落的第一行缩进 50 像素：p { text-indent:50px; }2.box-shadow 属性：添加一个或多个阴影box-shadow: h-shadow v-shadow blur spread color inset;h-shadow:水平阴影，越大越右移，负值在左边v-shadow:垂直阴影，越大越下...原创 2019-12-03 17:14:13 · 298 阅读 · 0 评论 -
遮罩css
1.图片遮罩.img_root{position: relative;display: flex;}.img_mask{position: absolute;width: 100%;height: 100%;background: rgba(100,100,100,0.5);}原创 2019-11-26 16:08:53 · 105 阅读 · 0 评论 -
css div垂直居中
方式一优点：不用给html设置100%，宽度不固定position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);方式二：使用flexhtml，body{height:100%;width:100%}.div{display: flex; width: 100%; he...原创 2019-11-25 11:36:50 · 117 阅读 · 0 评论 -
input元素中placeholder属性内容水平居中
实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo实例</title> <style> .input1::-ms-input-placeholder { ...原创 2019-11-21 16:28:04 · 1049 阅读 · 0 评论 -
底部固定
方法一：全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度，就像这个演示链接。HTML代码<body> <div class="wrapper"> content <div class="push"></div> </div> <foo...转载 2019-09-30 17:09:42 · 126 阅读 · 0 评论 -
绝对定位居中
1、兼容性不错的主流css绝对定位居中的用法：.conter{ width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */} 这种方法有一...转载 2019-09-30 16:55:30 · 4821 阅读 · 0 评论 -
flex学习
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html文章介绍了flex的语法，给出了常见布局的 Flex 写法原创 2019-09-04 17:53:08 · 148 阅读 · 0 评论