-
圆角边框
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); 可以实现遮罩层 父元素透明 子元素不透明
