CSS
艾欢欢
这个作者很懒,什么都没留下…
展开
-
使用CSS让矩形图片只展示中间正方形区域且图片不变形(div/img两种标签)
效果示意CSS实现使用 div 标签时,设置背景图,并设置 background-size: cover<!-- 标签 --><div class="square"></div><!-- 样式 --><style> .square{ width: 80px; height: 80px; background: url("背景图地址") no-repeat; b原创 2021-02-08 13:46:32 · 1318 阅读 · 0 评论 -
移动端h5页面禁止长按选择复制
注意 :增加之后需要对input做另外设置,不然输入框无法输入ios手机默认可以长按选择复制,如不想长按选择,可以用以下代码取消:*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/...原创 2019-11-01 16:25:25 · 4713 阅读 · 3 评论 -
css设置文本单行或多行溢出时显示省略号
单行文本溢出思路:使用overflow: hidden把超出的内容进行隐藏;然后使用white-space: nowrap设置内容不换行;最后使用text-overflow: ellipsis设置超出内容为省略号{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}注意: 需要...原创 2019-07-04 20:08:19 · 427 阅读 · 0 评论 -
在vue项目中(本地)使用iconfont字体图标的三种方式
使用前的准备和三种使用方式介绍,参考这里开始使用:点击下载到本地在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件解压下载到本地的字体图标文件,放到 iconfont 文件夹下如过项目中没有下载 css-loader 依赖包,就进行下载,否则会报错npm install css-loader -D然后在 main.js...原创 2019-05-06 19:14:01 · 8471 阅读 · 0 评论 -
在线使用iconfont字体图标
使用阿里巴巴矢量图标库在线使用案例三种使用方式介绍使用准备进入 阿里巴巴矢量图标库 ,登陆以后,搜索需要的图标,然后点击添加入库进入“我的图标库”(右上角购物车),点击添加至项目点击 + 图标创建一个新项目,然后把新图标加入到新项目中。(也可以按需添加到已有项目)进入我的项目,即可看到如下界面三种使用方式介绍unicode引用unicode是...原创 2019-04-30 15:24:07 · 5252 阅读 · 1 评论 -
45个值得收藏的 CSS 形状
CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。我们还可以使用 CSS 伪元素中的 ::before 和 ::after,这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧,我们可以只用一个...翻译 2019-04-30 09:47:16 · 488 阅读 · 0 评论 -
纯css实现左右滑动(-webkit-box使用)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>纯css实现左右滑动</title> <...原创 2019-04-19 19:57:28 · 3014 阅读 · 0 评论 -
通过meta代码强制浏览器使用WebKit内核极速模式(解决 meta name="renderer" content="webkit" 不起作用)
解决< meta name=“renderer” content=“webkit” >不起作用,从“步骤”开始看起。一般只使用代码<meta name="renderer" content="webkit"> ,但是有些浏览器会不起作用,所以在使用的时候,要完全兼顾。如果知道为什么使用这个标签,请直接从“步骤”开始查看。为什么这么做国产浏览器大多是双内核,甚至是...原创 2019-04-08 15:07:40 · 15339 阅读 · 4 评论 -
水平垂直居中一个元素(五种方法)
如何水平垂直居中一个元素第一种:使用定位(已知本身元素宽高)/*子元素*/.div1{ width: 400px; height:400px; background-color: red; position: absolute; top: calc(50% - 200px); left: calc(50% - 200px);}第二种:使用...原创 2019-03-15 19:52:54 · 738 阅读 · 0 评论 -
【什么是盒模型】标准盒子模型、怪异盒子模型
【CSS盒模型】标准盒子模型、怪异盒子模型什么是盒子模型CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性:内容(content),也就是元素的 width、height内边距(padding)边框(border)外边距(margin)这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫...原创 2018-12-21 14:35:42 · 8054 阅读 · 1 评论