189 8069 5689

Css常用的操作有哪些

本篇内容主要讲解“Css常用的操作有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Css常用的操作有哪些”吧!

为当涂等地区用户提供了全套网页设计制作服务,及当涂网站建设行业解决方案。主营业务为做网站、成都做网站、当涂网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

常见的css样式操作

单行文本溢出掩藏

语法:white-space: nowrap| pre | pre-wrap | pre-line | inherit

nowrap:单行文本不换行,文本显示一行;

pre: 保留空白(在游览器显示时,保留空格);

pre-wrap: 保留空白序列,正常换行;

pre-line: 合并空白符序列,但是保留换行符;

inherit: 继承父级元素white-space 属性的值;

语法:text-overflow:clip | ellipsis | string

clip: 裁剪文本;

ellipsis:省略号的形式替代被裁剪的文本;

string: 使用制定的字符来替代被裁剪的字符(且支持火狐浏览器);

div {    white-space: 'nowrap';     overflow: hidden;     text-overflow: ellipsis;}

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我并在后台私信我:前端,即可免费获取。

多行文本溢出掩藏

语法:display: -webkit-box ,将对象作为弹性伸缩盒子模型显示;

语法:-webkit-line-clamp:number

-webkit-line-clamp:限制一个块元素显示文本的行数(number)

语法:-webkit-box-orient:horizontal | vertical | inline-axis | block-axis

设置或检索伸缩盒对象的子元素的排列方式:

horizontal: 盒子水平布局其内容;

vertical:盒子垂直布局其内容;

inline-axis:盒子沿内联轴展示其子元素;

block-axis:盒子沿块轴展示其子元素;

div {    overflow: hidden;      text-overflow: ellipsis;      display: -webkit-box;      -webkit-line-clamp: 2;      -webkit-box-orient: vertical;}

实现三角形的效果(向上)

transparent:表示设置为透明

.triangle {      width: 0;      height: 0;      border-right: 20px solid transparent;      border-left: 20px solid transparent;      border-bottom: 20px solid red;  }

css3 实现垂直居中

语法:display:flex,justify-content:center, align-items: center

display:flex,设置弹性布局显示;

justify-content: center, 设置子元素水平居中;

align-items: center, 设置子元素垂直居中;

div {    display: flex;      justify-content: center;      align-items: center;}

css3 实现阴影效果

语法:box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow:水平阴影位置(必选),允许负值;

v-shadow: 垂直阴影的位置(必选),允许负值;

blur:模糊距离(选填);

spread: 阴影大小(选填);

color:阴影颜色(选填);

inset: 从外层的阴影(开始时)改变阴影内侧阴影(选填),默认是外阴影;

div {  box-shadow: 2px 2px 2px 2px #f00 inset;}

css3 实现圆角效果

语法:border-radius: number px; number 为数字

border-radius可设置多个值;

一个值:表示四个圆角都相同;

二个值:第一个值为右上和左下圆角的值,第二个值为右下和左上圆角的值;

三个值:第一个值为左上圆角的值,第二个值为右上和左下圆角的值,第三个值为右下的值;

四个个值:第一个值为左上圆角的值,第二个值为右上,第三个值为右下的值,第四个为左下圆角的值;

div {   border-radius: 30px;    /*border-radius: 10px 30px*/   /*border-radius: 10px 20px 30px*/   /*border-radius: 10px 20px 30px 40px*/}

css3 实现文本效果

语法:text-shadow: h-shadow v-shadow blur color;

h-shadow:必需。水平阴影的位置。允许负值;

v-shadow:必需。垂直阴影的位置。允许负值;

blur: 可选。模糊的距离;

color:可选。阴影颜色;

div {    text-shadow: 2px 2px 2px #F00;}

css 伪类first-letter

语法: first-letter表示向段落文本第一个字符添加特殊样式

div:first-letter{    font-size: 50px;    color:#f00;    ........}

css 伪类first-line

语法: first-line表示向文本的首行添加特殊样式

div:first-line {    font-size: 50px;    color:#f00;    ........}

css 跨游览器透明

兼容IE8及以下版本

div{    width: 200px;      height: 200px;      background: #00B7FF;      opacity: 0.5; /*标准游览器*/      filter: alpha(opacity=50);/*IE低版本 8*/}

css3 图片裁剪

语法:object-fit: contain | cover | fill | none | scale-down

contain: 缩放内容,保持内容的宽高比;

cover: 填充整个内容框,保持内容宽高比,如果对象的宽高比与内容框不匹配,该对象将裁剪以适应内容宽;

fill: 填充整个内容框(默认值),不保持原有比例;

none: 保持图片宽高不变;

scale-down: 当图片实际宽高小于所设置的图片宽高时,显示效果与none一致;否则,显示效果与contain一致;

div img {    width:100%;    height:100%;    object-fit: cover;}

设置 input placeholder 的颜色

div::-webkit-input-placeholder {color: #999} div:-moz-placeholder { color: #999} div::-moz-placeholder {color: #999} div:-ms-input-placeholder {  color: #999}

模糊滤镜效果

语法: filter:blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

blur(px): 设置高斯模糊,使用px为单位;

brightness(%): 设置图像明暗,使用%为单位,值越大越亮;

contrast(%): 调整图像的对比度。

drop-shadow(h-shadow v-shadow blur spread color): 给图像设置一个阴影效果,参考box-shadow;

grayscale(%): 将图像转换为灰度图像,使用%为单位;

hue-rotate(deg): 给图像应用色相旋转,使用deg为单位;

invert(%): 设置反转输入图像,值为0-100%;

opacity(0.5): 设置透明程度,值为0-1;

saturate(%): 设置图像饱和度;

sepia(%): 将图像转换为深褐色,值为0-100%;

url(): URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素

div{    filter: blur(1px);}

到此,相信大家对“Css常用的操作有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


本文题目:Css常用的操作有哪些
分享路径:http://cdxtjz.com/article/jchihc.html

其他资讯