1.圆角边框
- 语法
boder-radius:length - 其中每一个值可以为数值或百分比的形式
- 技巧：让一个正方形变成圆形
boder-radius:50% - 举例：
boder-radius:length
boder-radius:50%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角的写法</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/*变化为圆形方法一*/
/*border-radius: 50%;*/
/*变化为圆形方法二，这种方法设定的值从每个角（以左角为例）向右和向下100px处确定圆心，画圆角的弧*/
border-radius: 100px;
}
p{
width: 200px;
height: 100px;
background-color: red;
/*圆角的写法*/
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
2.盒子阴影
- 语法：
box-shadow:水平阴影 垂直阴影 模糊阴影 阴影尺寸 阴影颜色
box-shadow:水平阴影 垂直阴影 模糊阴影 阴影尺寸 阴影颜色
3.CSS布局的三种机制
- 普通流（标准流）
- 块级元素会独占一行，从上向下顺序排列:
常用元素：div hr p hx ul ol table - 行内元素：span a i em等
- 浮动
让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示 - 定位
将盒子定在浏览器的某一个位置--CSS离不开定位，特别是后面js特效
- 块级元素会独占一行，从上向下顺序排列:
常用元素：div hr p hx ul ol table - 行内元素：span a i em等
让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示
将盒子定在浏览器的某一个位置--CSS离不开定位，特别是后面js特效
4.什么是浮动
- 概念：元素的浮动是指设置了浮动属性的元素
- 脱离标准普通的控制
- 移动到指定位置
- 作用
- 让多个盒子水平排列成一行，使得浮动称为布局的重要手段
- 可以实现盒子的左右对齐等等
- 浮动最早是用来控制图片，实现文字环绕图片的效果
- 脱离标准普通的控制
- 移动到指定位置
- 让多个盒子水平排列成一行，使得浮动称为布局的重要手段
- 可以实现盒子的左右对齐等等
- 浮动最早是用来控制图片，实现文字环绕图片的效果
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
