CSS实用技巧:文字处理

来源:http://www.chinese-glasses.com 作者:Web前端 人气:126 发布时间:2020-05-06
摘要:时间: 2019-09-11阅读: 101标签: 文字前言 作为程序员的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单

时间: 2019-09-11阅读: 101标签: 文字前言

10bet 1

作为程序员的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。

Genius only means hard-working all one's life.

本小结主要是围绕css对文字处理的技巧,有兴趣的小伙伴可以收藏一下。

注意:以下前缀兼容性写法注释
-o-:Opera
-ms://IE10
-moz://火狐
-webkit://Safari 4-5, Chrome 1-9

文本对齐方式

23. 文字渐变效果

.text-gradient{
    background-image: linear-gradient(135deg, deeppink, deepskyblue);
    -webkit-background-clip: text;
    color: transparent;
}

10bet 2

文字渐变效果

CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且实现起来也是非常的简单。

22. IOS键盘字母输入,默认首字母大写,解决方案

<input type="text" autocapitalize="off" />

如下:

21. select 下拉选择设置右对齐

select option {
    direction: rtl;
}
p{ text-align: center; text-align: left; text-align: right; } 

20. 去除 iOS移动端 input,textarea输入框上方内阴影样式

CSS代码:
input, textarea, select{
   appearance: none;
   -moz-appearance: none; //Firefox 
   -webkit-appearance: none; //Safari 和 Chrome 
}

10bet 3

input输入框上方有内阴影效果图

10bet 4

去除input输入框上方的内阴影效果图

appearance属性,用来移除原生控件样式。亦可以用来去除 select 默认样式右侧的下拉小三角形。

但是两端对齐你有用过吗?

19. 自定义滚动条样式

整体部分 ::-webkit-scrollbar
两端按钮 ::-webkit-scrollbar-button
外层轨道 ::-webkit-scrollbar-track
内层轨道 ::-webkit-scrollbar-track-piece
滚动滑块 ::-webkit-scrollbar-thumb
边角 ::-webkit-scrollbar-corner
边角拖动块的样式 ::-webkit-resizer

只需要添加text-align-last:justify样式即可。请看示例:

横向滚动条
CSS代码:
.scroll-horizontal::-webkit-scrollbar{
    height: 10px;
}
.scroll-horizontal::-webkit-scrollbar-button{
    display: block;
    width: 5px;
    border: 5px solid transparent;
}
.scroll-horizontal::-webkit-scrollbar-button:start:decrement{
    border-right-color: red;
}
.scroll-horizontal::-webkit-scrollbar-button:end:increment{
    border-left-color: red;
}
.scroll-horizontal::-webkit-scrollbar-button:end:decrement{
    display: none;
}
.scroll-horizontal::-webkit-scrollbar-button:start:increment{
    display: none;
}
.scroll-horizontal::-webkit-scrollbar-thumb{
    background-color: green;
    border-radius: 30px;
}
.scroll-horizontal::-webkit-scrollbar-track-piece{
    /* background-color: #0898b2; */
    border-radius: 30px;
}
.scroll-horizontal::-webkit-scrollbar-track{
    border: 1px solid #721f1f;
    border-radius: 30px;
    margin: 0 5px;
}

10bet 5

横向滚动条

div  div 账号/div div 密码/div div 电子邮件/div /div 
竖向滚动条
CSS代码:
.scroll-vertical::-webkit-scrollbar{
    width: 10px;
}
.scroll-vertical::-webkit-scrollbar-button{
    display: block;
    height: 10px;
    border: 5px solid transparent;
}
.scroll-vertical::-webkit-scrollbar-button:end:increment{
    border-top-color: #1166DF;
}
.scroll-vertical::-webkit-scrollbar-button:start:decrement {
    border-bottom-color: #1166DF;
}
.scroll-vertical::-webkit-scrollbar-button:end:decrement,
.scroll-vertical::-webkit-scrollbar-button:start:increment{
    display: none;
}
.scroll-vertical::-webkit-scrollbar-track-piece{
    border-radius: 30px;
    background-color: #0b97b0;
    margin: 5px auto;
}
.scroll-vertical::-webkit-scrollbar-thumb{
    border-radius: 30px;
    background-color: green;
}

10bet 6

竖向滚动条

scss样式

18. 实现文字竖向排版

实现文字竖向排版,最简单的方法是设置较小的宽度,然后高度自适应。

p{
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding: 8px 5px;
}

10bet 7

10bet,设置较小的宽度,高度自适应

但是当想要多列展示时,设置宽度就不能实现我们想要的效果了,此时可以使用
writing-mode 属性。

p{
    height: 210px;
    line-height: 30px;
    text-align: justify;
    writing-mode: vertical-lr;  //从左向右    
    writing-mode: tb-lr;        //IE从左向右

    //writing-mode: vertical-rl;  -- 从右向左
    //writing-mode: tb-rl;        -- 从右向左
}

10bet 8

writing-mode 属性实现竖向排列

.justify-text { .li { padding: 0 20px; margin-top: 10px; width: 100px; background-color: #f13f84; line-height: 40px; text-align-last: justify; color: #fff; list-style: none; :first-child { margin-top: 0; } } } 

17. 实现按比例计算浅红到深红的颜色值

设置 rgb,固定 r 值为 ff, 让 g = b,从 ff 渐变到 0

10bet 9

#FF4040

10bet 10

#FF3030

10bet 11

#FF0000

10bet 12

效果图

文本排版方向

16. calc 可以使我们不用考虑元素的宽度值,直接交给浏览器去计算

当我们遇到左侧宽度值固定,右侧宽度值不定的时候,使用 calc 去设置元素的宽度是最好的解决办法。
在IE9+、FireFox4.0+、Chrome19+、Safari6+都有较好的支持

支持 " + " 、" - " 、 " * " 、" / " (运算符前后要加空格)
支持 " px " 、 " % " 、 " em " 、 " rem " 等单位 (可混合使用)

CSS代码:
div .left{
    width: 200px;   //左侧宽度固定
}
div .right{
    width: calc(100% - 200px);   
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
}

现代书本上的文字都是从左到右的顺序排列,但是古时候不同,文字都是从右至左排列的,现在在很多古籍、牌坊、石碑等上面依旧可以看到从右至左的文字。

15. CSS实现图片自动按比例等比例缩小并垂直水平居中,图片不变形

CSS代码:
div{
    position: relative;
    width: 270px;
    height: 200px;
    border: 1px solid #e2e2e2;
}
div img{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    max-width: 270px;
    max-height: 200px;
    width:expression(this.width > 270? "270px" : this.width);  //当低版本IE浏览器 不支持max-width属性时执行该语句
    height:expression(this.height > 200? "200px" : this.height);
}

css也可以调整文本排版方向,是通过什么属性控制的呢?

14. 多行文本溢出显示省略号

CSS代码:
.box{
    width: 100%;
    overflow: hidden;
    display: -webkit-box;   //将对象作为弹性伸缩盒子模型显示  *必须结合的属性*
    -webkit-box-orient: vertical;   //设置伸缩盒对象的子元素的排列方式  *必须结合的属性*
    -webkit-line-clamp: 3;   //用来限制在一个块元素中显示的文本的行数
    word-break: break-all;   //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*
}

10bet 13

三行溢出点点点

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

13. 单行文本溢出显示省略号

CSS代码:
a{
    overflow: hidden;   //超出隐藏
    display: block;
    max-width: 116px;
    text-overflow: ellipsis;   //当文本内容溢出时显示省略号
    white-space: nowrap;   //文本在同一行上不会换行,直到遇到 <br> 标签为止
    height: 40px;
    line-height: 40px;
    background-color: #f8f8f8;
    padding: 0 10px;
}

主要代码:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

text-overflow: clip | ellipsis
clip: 不显示省略号(...)
ellipsis: 当文本内容溢出时显示省略号(...)

10bet 14

单行溢出点点点

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr 

12. 左右两边 div 的高度自适应相等

需要将 margin 和 padding 的数值设置的越大越好
需要给父元素设置 overflow: hidden;

html代码结构:
<div class="w c pagecont">
    <div class="l pageleft"></div>
    <div class="l pageright"></div>
</div>

CSS代码:
.c{
    overflow: hidden;
    zoom: 1;
}
.pageleft, 
.pageright {
    padding: 30px;
    margin-bottom: -10000px;
    padding-bottom: 10030px;
}

10bet 15

效果图

horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left vertical-lr:垂直方向内内容从上到下,水平方向从左到右 sideways-rl:内容垂直方向从上到下排列 sideways-lr:内容垂直方向从下到上排列

11. CSS实现文本两端对齐

CSS代码:
div{
    text-align: justify;
    text-justify: distribute-all-lines;  //ie6-8
    text-align-last: justify;  //一个块或行的最后一行对齐方式
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

下面看具体示例:

10. IE6浏览器常见兼容问题

// 横向双倍margin
IE6中设置元素浮动后,会出现横向双倍margin值。--添加 _display: inline;
// 3px bug
浮动块元素处于同一行时,有默认的3px间距。--设置非浮动元素浮动。
// 透明度
opacity: 0.6; --filter: alpha(opacity = 60);
div  div  h3诗经/h3 p 死生契阔,br 与子成说。br 执子之手,br 与子偕老。 /p /div /div 

9. PC端调用QQ实现在线聊天

点击图标或者文字可以直接调用QQ实现在线聊天

<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=80080088&amp;site=qq&amp;menu=yes" target="_self"><img border="0" src="http://wpa.qq.com/pa?p=2:80080088:51" title="在线客服" /></a>
//修改两处QQ号即可

10bet 16

图标效果图

<a href="tencent://message/?uin=80080088&amp;Site=Sambow&amp;Menu=yes">80080088</a>
//修改一处QQ号即可

10bet 17

文字效果图

scss样式

8. CSS3 Gradient 渐变

CSS3 Gradient 分为线性渐变和径向渐变。

html代码:
<div class = "gradient" style = "width: 120px; height: 80px; "></div>

CSS代码:
background: #e6e6e6;   //当浏览器不支持背景渐变时该语句将会被执行
background: -o-linear-gradient(top, #fdfdfd,  #e6e6e6); 
background: -moz-linear-gradient(top, #fdfdfd, #e6e6e6); 
background: -webkit-linear-gradient(top, #fdfdfd, #e6e6e6);   //最新发布语法
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), #e6e6e6);   //老式语法
.vertical-text { writing-mode: vertical-rl; // 文字排版方向 h3 { padding-left: 10px; font-weight: bold; font-size: 18px; color: #d60f5c; } p { line-height: 30px; // 行间距 letter-spacing: 7px; // 文字间距 color: #ee1166; } } 
示例:
background: -webkit-linear-gradient(left top, #ccc, green, yellow, red);   //线性渐变
background: -webkit-radial-gradient(center, red, blue, #f96, green);   //径向渐变
//不设置位置,将会均匀分布

10bet 18

效果图

10bet 19

效果图

background: -webkit-linear-gradient(top, #ccc 5%, #F95 30%, red);   //线性渐变
background: -webkit-radial-gradient(center, red 5%, blue 10%, #f96 40%,  green 100%);   //径向渐变
//设置位置

10bet 20

效果图

10bet 21

效果图

background: -webkit-repeating-linear-gradient(-45deg, #f96, #f96 3px, green 3px, green 8px);   //线性重复渐变
background: -webkit-repeating-radial-gradient(red, #f96 2px, green 2px, green 8px);   //径向重复渐变

10bet 22

效果图

10bet 23

效果图

共有三个参数,第一个参数表示线性渐变的方向,top是从上到下,left是从左到右,如果定义成left top 或者角度(-45deg),那就是从左上角到右下角。第二个参数是起点颜色,第三个参数是终点颜色。可以在它们之间插入更多的参数,表示多种颜色的渐变。

IE依靠滤镜实现渐变。
startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0表示垂直渐变,1表示水平渐变。

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f96, endColorstr=#ccc);   //IE9
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f96, endColorstr=#ccc)";   //IE8+

文本从右至左排列

实例 (实现鼠标移上时出现黑心圆点效果)
CSS代码:
span{
    display: block;
    float: left;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #ccc;
    font-size: 0;
    background: #fff;
    margin: 0 5px;
}
span:hover{
    background: #676767;  
    background: -o-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
    background: -moz-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
    background: -webkit-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
}

10bet 24

实现黑心圆效果

div  红豆生南国br/ 春来发几枝br/ 愿君多采撷br/ 此物最相思 /div 

7. CSS3 columns多列布局

div{
    //把div元素中的文本划分为4列
           -moz-columns: 4;
        -webkit-columns: 4;
                columns: 4;
    //将div元素中的文本分为三列,并列间30px的间隔
        -moz-column-gap: 30px;
     -webkit-column-gap: 30px;
             column-gap: 30px;
    //规定列之间的宽度、样式和颜色
       -moz-column-rule: 1px outset #fff;
    -webkit-column-rule: 1px outset #fff;
            column-rule: 1px outset #fff;
}

10bet 25

多列布局效果图

scss样式

6. 设置表单file控件上传文件时可以选择多个文件

<input type='file' multiple='true'>   //设置multiple属性值为true

本文由10bet发布于Web前端,转载请注明出处:CSS实用技巧:文字处理

关键词:

最火资讯