css背景边框列表链接

2024-06-21 03:50:44

ife2018 第四天，背景边框列表链接和更复杂的选择器

课程目标

掌握 CSS 稍微复杂的一些选择器，还有背景，边框等一些 CSS 样式属性。

background属性

background-color: #fff;
background-image: url(img/background.jpg)
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;

backgorund-repeat

no-repeat -停止完全重复背景。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat—默认值；双向重复。

background-attachment

注意：background-position的值和 background-attachment息息相关，background-position的位置是相对于整个页面的位置。以下是属性值
inherit：继承父级
fixed ：固定在页面上
scroll: 随着页面滚动

background-position

CSS3中的background-size

表示铺满整个屏幕

background-size: 100% 100%;

background 的简写形式：

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

例如：规定背景图片，不重复，固定在左上角

background: url() no-repeat fixed top left;

渐变gradient

线性渐变 linear-gradient

.linear-gradient {background: linear-gradient(to right,red, orange, yellow, green, blue, indigo, violet);
}

径向渐变 radial-gradient

径向渐变从中心点（原点）开始逐渐过渡颜色。它们是通过radial-gradient()函数生成的。

.radial-gradient {background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

边框border

border属性中的border-style.

例如：

div{width:200px;height:200px;background:#3388ff; border: 0.5rem outset #296ece;

更多border属性在MDN中查看。

列表list

常见三种列表类型。

<ol><li>item1</li><li>item2</li></ol>//有序列表
<ul><li>item1</li><li>item2</li></ul>//无序列表
<dl><dt>item1<dd></dd><dd>item2</dd></dt></dl>//描述性列表 dt里允许有多个dd

列表样式

更多 list css 属性细节在MDN中查看。

参考地址：
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://www.w3school.com.cn/cssref/pr_border-style.asp

css背景边框列表链接相关推荐

百度前端技术学院--零基础--第四天：背景边框列表链接和更复杂的选择器
第四天背景边框列表链接和更复杂的选择器课程目标掌握CSS稍微复杂的一些选择器,还有背景,边框等一些CSS样式属性课程描述复习 CSS的基本概念,基本的选择器,以及关于字体的一些样式设置. 阅 ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程
DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚 ...
CSS知识点整理(代码示例参考w3shool）（包括CSS概念语法作用、CSS引入方式、CSS背景、文本、字体、链接、轮廓、表格、常用选择器等）
文章目录 CSS简介 CSS 概念 CSS 作用 CSS 语法 CSS引入方式 1.内联样式表 2.内部样式表 3.外部样式表 CSS常用样式 CSS背景 1.背景色:background-color ...
【html5+css】文字样式 line-height 和 vertical-align css背景 css边框
**一.文字样式字体可以是列表的形式,一般英语字体放到前面,后面的字体是前面的字体的后备字体字体名称中有空格,必须要用引号来包裹** font-weight:指定字体粗细 -blod normal ...
CSS实现自适应的图片背景边框代码
代码简介: CSS漂亮的图片边框,边框是用背景图片修饰的,不过可以自适应大小,这点挺实用的,不论你的图片有多大,它始终显示在图片的外围,不会错位,这当然还要归功于CSS的功劳. 代码内容: View ...
CSS样式笔记_背景文本字体链接
CSS背景属性: background:简写属性在一个声明中设置所有的背景属性.可以用于设置最底层的背景图片. background-attachment:属性设置背景图像是否固定或者随着页面的其余部 ...
利用CSS背景定位实现列表项目符号图像的精确定位(ul,li,自定义项目符号)
在越来越流行的 DIV+CSS建站模式中,对于首页或频道主页放置的大量栏目或信息列表,普遍采用的是 HTML中的列表类标签:ul li.ol li.dl dt dd. 对于这些标签除了可以直接使用CS ...
html5晋级之路-css背景
css背景: css允许应用纯色作为背景,也允许使用图片来创建相当复杂的效果. background-attachment 背景图像书否固定或随页面的其余部分滚动 backgro ...

最新文章

热门文章