2018-04-21 记录一些用到的CSS样式【留下了不学无术的

• 圆角边框

CSS3 border-radius 属性

div{
    border:2px solid;
    border-radius:25px;
}

效果

image.png

• 只要四个角的边框

CSS background 属性

    background: linear-gradient(to left, #FF3399, #FF3399) left top no-repeat, 
                linear-gradient(to bottom, #FF3399, #FF3399) left top no-repeat, 
                linear-gradient(to left, #FF3399, #FF3399) right top no-repeat,
                linear-gradient(to bottom, #FF3399, #FF3399) right top no-repeat, 
                linear-gradient(to left, #FF3399, #FF3399) left bottom no-repeat,
                linear-gradient(to bottom, #FF3399, #FF3399) left bottom no-repeat,
                linear-gradient(to left, #FF3399, #FF3399) right bottom no-repeat,
                linear-gradient(to left, #FF3399, #FF3399) right bottom no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;

效果

image.png

可以用背景图片实现吧。。。可能吧。。。

• 超过固定宽度的文本内容显示...

    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width:300px;
  }

效果

image.png

• 阴影边框

box-shadow: -10px 0 0 green; //左边阴影
box-shadow: 10px  0 0 yellow; //右边阴影
box-shadow: 0 -10px 0 blue; //顶部阴影
box-shadow: 0 10px 0 red; //底部阴影

效果

image.png

• 遮罩层

background: rgba(34, 34, 34, 0.7); 可以实现遮罩层 父元素透明 子元素不透明