css小tips

作者: 吸猫群众 | 来源:发表于2017-12-04 17:12 被阅读24次

像我们平时做的显示在页面上的多行纯文字，很有可能会出现两端不齐的现象，如图1。

图1 两端不对齐

这里推荐使用text-align:justify来做两端对齐的布局。如图2。

图2 两端对齐

类似这种竖向文字排版如图3、图4，可以使用-webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;来使它竖直排版。

图3 竖直效果

图4 竖直效果

图5 渐变边框

图6 非渐变边框

本次活动页要求写一个渐变边框，如图5所示，这里推荐使用css3的线性渐变linear-gradient。代码如下：

图7 渐变边框代码

transition与visibility可以用来做延时显示，代码如下：

图7 延时代码

css小tips
像我们平时做的显示在页面上的多行纯文字，很有可能会出现两端不齐的现象，如图1。这里推荐使用text-align:...
css小tips
三大特性层叠性优先级继承性恰当的使用继承可以简化代码，color以及text- font- line-开头...
一个webAPP项目的完整记录(vue)
项目初始化 some Tips 引入外部CSS: @import "../css/base.css";引入外部J...
CSS小Tips-1
CSS属性太多了，所以会有很多平时注意不到的知识点，这片博客主要就是记录一下平时遇到的一些需要注意的问题。虽然知识...
【css】常用样式&骨架屏
css css Tips css更多写法 tanform动画矩阵图片压缩规则 [x] 阿里云压缩规则：?x-o...
css tips
高度不定的情况下，让文字水平居中在内容宽高不定的情况下，让内容居中
css tips
.box:first-child和.box :first-child的区别选择一个class为box的元素，要求...
CSS Tips
1.半透明边框border:10px solid hsla(0,0%,100%,.5);background:wh...
CSS Tips
根据内容调整字体大小 https://github.com/davatron5000/FitText.js[htt...
CSS Tips
垂直居中 display: relative如果父类有设置高度可以尝试 (height: 100%也可以) 没有的...