10.CSS背景图片与背景颜色详解 | 圆角矩形实现原理 | 元素显示模式转换

目录一、背景属性1. 背景颜色2. 背景平铺3. 背景位置4. 背景尺寸二、圆角矩形1. 基本用法2. 生成圆形3. 展开写法三、元素的显示模式四、常见的块级元素五、常见的行内元素一、背景属性1. 背景颜色语法background-color: [指定颜色]说明​默认是 transparent (透明) 的。可以通过设置颜色的方式修改。示例代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style body { background-color: #d6c1e9; } div { background-image: url(../头像.jpg); width: 500px; height: 500px; } /style /head body div 这是我在学习背景相关的属性 /div /body /html2. 背景平铺语法background-repeat: [平铺方式]重要取值repeat: 平铺no-repeat: 不平铺repeat-x: 水平平铺repeat-y: 垂直平铺说明​默认是repeat。背景颜色和背景图片可以同时存在。背景图片在背景颜色的上方。示例代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style body { background-color: #d6c1e9; } div { background-image: url(../个人信息.png); width: 700px; height: 300px; background-repeat: repeat-x; /* background-repeat: repeat-y; */ /* background-repeat: no-repeat; */ /* background-repeat: repeat; */ } /style /head body div 这是我在学习背景相关的属性 /div /body /html3. 背景位置语法background-position: x y;说明​修改图片的位置。参数有三种风格(注释掉的内容也要看)方位名词: (top,left,right,bottom)精确单位: 坐标或者百分比(以左上角为原点)混合单位: 同时包含方位名词和精确单位!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style body { background-color: #d6c1e9; } div { background-image: url(../个人信息.png); width: 700px; height: 300px; background-repeat: no-repeat; /* background-position: 200px 200px; */ /* background-position: right; */ background-position: 100px center; } /style /head body div 这是我在学习背景相关的属性 /div /body /html4. 背景尺寸语法background-size: length|percentage|cover|contain;说明可以填具体的数值: 如40px 60px表示宽度为 40px高度为 60px也可以填百分比: 按照父元素的尺寸设置。cover: 把背景图像扩展至足够大以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。contain: 把图像图像扩展至最大尺寸以使其宽度和高度完全适应内容区域。示例代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style body { background-color: #d6c1e9; } div { background-image: url(../个人信息.png); width: 700px; height: 300px; background-repeat: repeat; background-position: 100px center; /* background-size: 200px 700px; */ /* background-size: cover; */ background-size: contain; } /style /head body div 这是我在学习背景相关的属性 /div /body /html二、圆角矩形通过border-radius使边框带圆角效果。1. 基本用法语法border-radius: length;说明​length 是内切圆的半径。数值越大弧线越强烈。2. 生成圆形让border-radius的值为正方形宽度的一半即可。示例代码div { width: 200px; height: 200px; border: 2px solid green; border-radius: 100px; /* 或者用 50% 表示宽度的一半 */ border-radius: 50%; }效果图对应代码 1圆角矩形!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style div{ width: 400px; height: 200px; border: 2px green solid; border-radius: 20px; } /style /head body div/div /body /html效果图对应代码 2圆形!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style div{ width: 200px; height: 200px; border: 2px green solid; border-radius: 100px; } /style /head body div/div /body /html效果图对应代码 3圆形另一写法!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style div{ width: 200px; height: 200px; border: 2px green solid; /* border-radius: 100px; */ border-radius: 50%; } /style /head body div/div /body /html效果图对应代码 4矩形圆角!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style div{ width: 400px; height: 200px; border: 2px green solid; /* border-radius: 100px; */ /* border-radius: 50%; */ border-radius: 100px; } /style /head body div/div /body /html3. 展开写法border-radius是一个复合写法实际上可以针对四个角分别设置。等价写法 1border-radius: 2em;等价于border-top-left-radius: 2em; border-top-right-radius: 2em; border-bottom-right-radius: 2em; border-bottom-left-radius: 2em;等价写法 2border-radius: 10px 20px 30px 40px;等价于按照顺时针排列示例代码style div { width: 400px; height: 200px; border: 2px green solid; /* border-radius: 100px; */ /* border-radius: 50%; */ /* border-radius: 100px; */ border-top-left-radius: 20px; border-top-right-radius: 40px; border-bottom-right-radius: 20px; border-bottom-left-radius: 40px; } /style body div/div /body示例代码另一种展开style div { width: 400px; height: 200px; border: 2px green solid; /* border-radius: 100px; */ /* border-radius: 50%; */ /* border-radius: 100px; */ /* border-top-left-radius: 20px; border-top-right-radius: 40px; border-bottom-right-radius: 20px; border-bottom-left-radius: 40px; */ border-radius: 20px 40px 20px 40px; } /style body div/div /body三、元素的显示模式在 CSS 中HTML 的标签的显示模式有很多。此处只重点介绍两个块级元素行内元素示例代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style a { display: block; } /style /head body a href#链接1/a a href#链接2/a /body /html说明​通过block把我们的行内元素转换成单独可以占据一行的块级元素。四、常见的块级元素h1~h6 标题元素 div 常用块级容器 p 段落 hr 水平分割线 ol 有序列表 ul 无序列表 li 列表项 table 表格 form 表单 nav 导航 header 页眉 footer 页脚 section 区块 article 文章 aside 侧边栏 blockquote 块引用 pre 预格式文本块级元素的特点独占一行可设置宽度、高度、内外边距默认宽度为父元素的100%可以包含其他块级元素和行内元素五、常见的行内元素a 超链接 span 常用行内容器 strong 加粗强调 b 加粗 em 强调 i 斜体 code 代码 img 图片 input 输入框 label 标签 button 按钮 select 下拉列表 textarea 多行文本框 sup 上标 sub 下标 br 换行行内元素的特点不独占一行可与其他行内元素同行显示默认宽度由内容撑开无法直接设置宽度、高度上下外边距不生效上下内边距可能不占空间不挤压其他元素