CSS3
关注
分享
扫一扫
福州司马懿
大家如果觉得文章有帮助，给我个关注。谢谢大家 (+_+)，失业了球介绍工作
展开
-
CSS3 隐藏滚动条（支持 chrome、firefox、edge）
* { -ms-overflow-style:none; /* Edge */ scrollbar-width: none; /* Firefox */}::-webkit-scrollbar { display: none; /* Chrome */}原创 2020-07-27 15:57:58 · 1237 阅读 · 0 评论 -
CSS3 设置网页黑白
今天是清明节，整个优快云都换上来黑白的装束。对于一些需要悼念的日子，一般在全国哀悼日，大地震的日子，清明节，我们都会让自己的网站全站灰色，以表示对逝者的悼念。以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。还有其他特殊原因（比如汶川大地震）对部分事件表示哀悼，所以需要把整个网站设置为灰色或者黑白方格。在黑白的网页...原创 2020-04-04 17:40:45 · 1577 阅读 · 0 评论 -
CSS3 图片占位符 https://placeholder.com
分享一个偶然看到的非常有用的图片占位符网站： https://placeholder.com/What Is Placeholder.com ?Placeholder.com generates custom placeholder images on the flyplaceholder.com 是什么？placeholder.com 这个网站会根据需求在云端生成自定义的图片占位符...原创 2018-10-31 19:04:48 · 5641 阅读 · 0 评论 -
CSS3 white-space
white-space空格换行<br>容器边界换行normal合并忽略换行换行nowrap合并忽略换行忽略pre保留换行换行忽略pre-wrap保留换行换行换行pre-line合并换行换行换行inherit换行<!DOCTYPE html><html>...原创 2018-10-30 11:19:22 · 1220 阅读 · 0 评论 -
CSS3 box-shadow（3D球，翘边纸）
参考：http://www.cnblogs.com/fsjohnhuang/p/5477194.html1. 属性概述box-shadow : none | &amp;amp;amp;amp;lt;shadow&amp;amp;amp;amp;gt;[, &amp;amp;amp;amp;lt;shadow&amp;amp;amp;amp;gt;]* 默认值为none&amp;amp;amp;amp;lt;shado原创 2018-11-07 16:27:20 · 3007 阅读 · 1 评论 -
CSS3 vertical-align 无效的问题
转自 https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referralvertical-align:middle的定位方式是：将子元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐父盒子在排列子盒子的时候，一般都是把它们的baseline对齐，默认...转载 2018-11-07 16:39:59 · 3656 阅读 · 0 评论 -
CSS3 不执行 Transition 过渡动画
如果元素设置了transition，那么当 JavaScript 改变相应属性值的时候，就会触发该过渡动画。有时候，我们想直接设置该值，而不触发过渡动画，最直观的想法就是先设置 transition-duration 为0，然后设置该值，最后恢复 transition 的值。但是这个方法是行不通的，因为JavaScript是单线程的，它采用消息机制，当我们给元素赋予某个样式的时候，它并没有立即执...原创 2018-11-15 16:51:23 · 9238 阅读 · 1 评论 -
CSS3 缓动函数
转自 https://easings.net/zh-cn#缓动函数指定动画效果在执行时的速度，使其看起来更加真实。现实物体照着一定节奏移动，并不是一开始就移动很快的。当我们打开抽屉时，首先会让它加速，然后慢下来。当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。本页可以在每次你需要时，帮助你找到想要的缓动函数。CSSCSS 属性 transition 和 anima...转载 2018-11-23 10:38:04 · 3005 阅读 · 0 评论 -
CSS3 object-fit 和 object-postion 实现图片居中缩放
object-fit值描述fillcontaincovernonescale-down&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&原创 2019-02-25 19:06:15 · 2417 阅读 · 0 评论 -
CSS3 counter 计数器
参考 http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/ 参考 https://www.w3cplus.com/css3/css-counters.html定义 name syntax description counter-reset [&...原创 2018-04-13 16:50:45 · 1722 阅读 · 0 评论 -
CSS3 Counter Style
转自 https://blog.youkuaiyun.com/whqet/article/details/43605725 使用@counter-style命令，我们可以自定义列表样式，可以用在list-style、counter、counters等上。结构解析定义一个counter-style的典型格式如下：@counter-style counter名字{ ...转载 2018-04-13 14:25:51 · 1399 阅读 · 0 评论 -
CSS3 三角形
使用纯CSS绘制图片可以减少请求位图带来的网络开销，提高渲染速度。 CSS绘制三角形主要利用了——当元素的宽高慢慢缩小为0时，4个边框也会由梯形逐渐变为三角形。 常和before一起使用，用作聊天气泡前的三角形，或如下的三角边框装饰<html><head><meta charset="utf8"><style>section { ...原创 2018-04-13 12:13:58 · 1790 阅读 · 0 评论 -
CSS font
简介font 可以在声明中一次性设置所有字体属性。可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。font:italic bold 12px/20px arial,sans原创 2016-12-09 17:00:58 · 1573 阅读 · 0 评论 -
CSS3 filter grayscale 将整个界面变为黑白灰色调
通过外部样式<link rel="stylesheet" type="text/css" href="myGrayscale.css">myGrayscale.csshtml { /* IE 浏览器 */ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: grayscale(1原创 2017-02-10 16:25:48 · 11010 阅读 · 0 评论 -
CSS3 cursor
<html><head> <meta charset="utf8"> <style> b { vertical-align: middle; } table { width: 600px; text-align: center; borde原创 2017-02-10 23:26:34 · 1325 阅读 · 0 评论 -
CSS3 border-image
border-image 简介border-image 属性是一个简写属性，用于设置以下属性：border-image-source 边框图片的路径border-image-slice 边框图片向内偏移border-image-width 边框图片的宽度border-image-outset 边框图片区域超出边框的距离border-image-repeat 边框图片是否应平铺(r原创 2017-02-10 17:28:17 · 2165 阅读 · 0 评论 -
CSS3 media queries
MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries A media query consists of an optional media type and zero or more expressions that limit the style sheets’ scope翻译 2017-02-14 09:24:54 · 1214 阅读 · 0 评论 -
CSS border-radius:50%和100%的区别
转自知乎 https://zhuanlan.zhihu.com/p/20128284?columnSlug=FrontendMagazine用 CSS 画一个完美的圆在 Web 上我们常常会看到很多用到圆形的地方，比如带背景色的或者图片是圆形的。通常我们都是用 CSS 的 border-radius 属性实现圆形：先画一个方形，然后将它的 border-radius 设置成50%。但是为什么偏偏是5转载 2017-01-30 16:29:57 · 8282 阅读 · 0 评论 -
CSS3 选择符
一、元素选择符 selector description * 通配选择符，匹配所有对象 E 类型选择符，匹配标签对应的元素 E#myid ID选择符，匹配唯一标识符id属性等于myid的E对象 E.myclass 类选择符，匹配class属性的值等于myclass的E对象二、关系选择符 selector ...原创 2018-04-12 19:03:09 · 1310 阅读 · 0 评论 -
div设置float后下一个div要换行的解决办法
div设置float之后，如果没有清除，则下一个被设置float的div会根据上一个float的div的布局进行排版；而下一个没设置float属性的div则是根据它的前一个元素进行排版。要清除float属性，只能使用style=”clear:both”。注意，clear:both不能脱离style独立存在。且clear:both仅对容器元素有效，对非容器元素无效。另外<br />和<p>的换行高原创 2016-12-11 17:15:05 · 9398 阅读 · 0 评论