边框背景列表连接及复杂的选择器

最新推荐文章于 2023-07-02 21:48:54 发布

曌-MMei

最新推荐文章于 2023-07-02 21:48:54 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/sinat_41544154/article/details/81134317

版权

1.控制背景图片固定不动，不随滚动条的滚动而滚动
body 
  { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed;
  }

可能的值

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

更多相关背景的设置 http://www.w3school.com.cn/css/css_background.asp

CSS 背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

背景颜色渐变

div {
background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);
}

这个渐变会从上到下运行，从黄色开始，向下渐变到橙色的40%，然后再回到黄色，达到100%。您可以指定任意多个颜色站点，您也可以使用其他的单位来指定这些颜色站点的位置，例如rem，px等。

让我们把多个背景放在我们精彩的盒子上——我们想要看到渐变和火球，两者同时出现：

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
              linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

边框

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。