随笔分类 -  CSS编码技巧

九、CSS布局
摘要：一、通过内容来确定元素的宽度 HTML: <figure> <img src="11.jpeg" alt="这是一直华南虎"> <figcaption>这是一直华南虎🐅</figcaption> </figure> <figure> <img src="11.jpeg" alt="这是一直华南虎" 阅读全文
posted @ 2018-11-21 11:27 道鼎金刚 阅读(122) 评论(0) 推荐(0)
八、文字
摘要：一、英文软连字符换行 HTML: <p> The only way to get rid of a tempta-tion is on yield to it.</p> CSS: hyphens: auto; 二、英文符号"&"优化 HTML: HTML<span class="amp">&amp; 阅读全文
posted @ 2018-11-20 11:12 道鼎金刚 阅读(109) 评论(0) 推荐(0)
七、投影
摘要：一、单侧投影 box-shadow: 0 5px 5px -3px black; 二、临边投影 box-shadow: 5px 5px 6px 0px black; 三、双侧投影 box-shadow: 5px 0 5px -3px black, -5px 0 5px -3px black ; 四、 阅读全文
posted @ 2018-11-19 11:47 道鼎金刚 阅读(100) 评论(0) 推荐(0)
六、SVG
摘要：一、SVG制作扇形 1、html代码 <svg viewBox = "0 0 32 32"> <circle r="16" cx="16" cy="16" /> </svg> 2、css代码 svg { width: 100px;height: 100px; transform: rotate(-9 阅读全文
posted @ 2018-11-19 09:58 道鼎金刚 阅读(129) 评论(0) 推荐(0)
五、背景
摘要：一、有偏移量的背景图片定位 1、使用background-position background: #ccc url(1.png) no-repeat; background-position: right 10px bottom 10px; 2、用calc()计算 background：#ccc 阅读全文
posted @ 2018-11-15 10:00 道鼎金刚 阅读(111) 评论(0) 推荐(0)
四、图片
摘要：一、图片制作多边形 img {clip-path: polygon(50% 0, 100% 50%,50% 100%, 0 50%);} 二、添加动画效果 img { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);transition: 1 阅读全文
posted @ 2018-11-14 18:12 道鼎金刚 阅读(90) 评论(0) 推荐(0)
三、伪类伪元素
摘要：一、用伪元素做平行四边形 .button { position: relative; width: 100px; height: 100px; background-color: rgba(0,0,0,.0); margin: 100px; } .button::before {content: ' 阅读全文
posted @ 2018-11-14 17:47 道鼎金刚 阅读(144) 评论(0) 推荐(0)
二、边框
摘要：边框的技巧 一、半透明边框 background-color: yellow; border: 10px solid rgba(0,0,0,.1)； background-clip: padding-box; //对背景进行裁剪，否则背景色会从边框下面透上来。 二、多重边框 1、使用阴影模拟多个边框 阅读全文
posted @ 2018-11-13 17:27 道鼎金刚 阅读(111) 评论(0) 推荐(0)
一、代码规范
摘要：一、使用相互依赖的值 如果font-size和line-height是有依赖关系的，例如行高是字体的2倍： font-size: 20px; line-height: 40px; 可以优化成=> font-size: 20px; line-height: 2em;。 但是需要灵活运用如果font-s 阅读全文
posted @ 2018-11-13 14:36 道鼎金刚 阅读(114) 评论(0) 推荐(0)