css常用属性

2019-08-14 09:55:09来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

文字超出省略:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
前提要设置固定的宽度
 
多行文字省略(指在webkit内核下生效)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 
flex布局——垂直水平居中
display: flex;
justify-content: center;
align-items: center;
 
flex布局——控件自适应平分
父组件:
    display:flex;
子组件:
    flex-grow: 1;       // 水平平分
    flex-flow: 1;      // 垂直平分    
    flex-direction: column;    // 通过调整主轴的对齐方式
 
文字对齐方式
vertical-align: middle;    // 调整文字与内容对齐方式
 
设置padding会导致控件溢出或变大(部分情况下)
box-sizing: border-box;    // 改变盒子类型 将内填充也算作盒子的大小
 
css3发光字体
属性:text-shadow: 0 0 40px #136991;
例子:
 
文字渐变色
background-image: linear-gradient(to bottom, #d49e34, #fff17d);
color: transparent;
-webkit-background-clip: text;
 
修改input、textarea元素中的placeholder属性样式
input::-webkit-input-placeholder{}      /* 使用webkit内核的浏览器 */
input:-moz-placeholder{}               /* Firefox版本4-18 */
input::-moz-placeholder{}             /* Firefox版本19+ */
input:-ms-input-placeholder{}         /* IE浏览器 */

原文链接:https://www.cnblogs.com/listen-spacer/p/11280917.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS中为什么有的元素能够设置高度,而有的元素却不能设置高度与

下一篇:css Backgroud-clip (文字颜色渐变)