![](https://img-blog.csdnimg.cn/20191116115001882.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS3
前端设计诗
WEB后端攻城狮
展开
-
CSS怎么画“凹““凸“?
1、这里我们利用到的CSSwidth属性的首选最小宽度特性。所谓“首选最小宽度”,指的是元素最适合的最小宽度。2、在 CSS 世界中,图片和文字的权重要远大于布局,因此,CSS 的设计者显然是不会让图文在 width:auto 时宽度变成 0 的,此时所表现的宽度就是“首选最小宽度”。具体表现规则如下。• 东亚文字(如中文)最小宽度为每个汉字的宽度,如图 3-11 所示的 14。 • 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元,一般会终止于空格(普原创 2021-01-26 20:07:24 · 401 阅读 · 0 评论 -
box-shadow实现轻拟物风格按钮
1、2、HTML <span class="jurisdictionButton cursor"> <img src="../res/png/set_icon.png" alt="" style="vertical-align: middle; margin-top: -2px;" /> 管理员权限</span>CSS width: 120px; height: 32px; display:原创 2020-09-11 14:47:52 · 702 阅读 · 0 评论 -
flex布局怎么实现宽度自适应?
1、UI界面页面分为两个部分,左右两格,当页面进行伸缩时,其宽度随着页面宽度自适应。 左右两格排列给父元素div进行设置 display: flex; flex-flow: row wrap; // 以行排列 并且允许换行 align-content: flex-start;flex-flow 设置轴向与换行组合是 flex-direction 和 flex-wrap 的简写。所以只要掌握,flex-direction 和 flex-wrap即可。 两个盒子的宽度随着页面宽原创 2020-09-07 12:28:49 · 31786 阅读 · 0 评论 -
HTML中title属性妙用(title属性换行)
1、需求当鼠标移入当当前文件夹的时候,显示当前当遇见这个需求的时候,我们下意识可能会想到用CSS画一个框,然后用JS去控制鼠标移入显示隐藏。但这里我们完全可以使用HTML的title属性,完美解决。2、直接给需要悬浮显示的HTML标签加个title属性即可<img title=" 名称: ${it.fileName} 文件数:${it.fileCount}个"完...原创 2020-04-30 15:23:02 · 2375 阅读 · 0 评论 -
设置文本省略号移入显示布局不变完整完美解决方案
1、.reject { float: left; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.reject:hover { white-space: normal;}原创 2020-02-28 15:17:29 · 720 阅读 · 0 评论 -
CSS3 filter(滤镜) 制作图片高斯模糊无需JS
1、fliter: blurfilter 属性定义了元素(通常是)的可视效果,blur属性给图像设置高斯模糊。”radius”一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;filter: blur(5px);2、方式一 直接使用flute<!DOCTYPE html><html> <head> <meta...原创 2020-02-24 09:44:56 · 672 阅读 · 0 评论