css3基础

最新推荐文章于 2024-03-03 12:59:43 发布

吴莉

最新推荐文章于 2024-03-03 12:59:43 发布

阅读量129

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/kgcwuli/article/details/97620384

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.css3边框

1.border-radius 用于创建圆角
四个值
左上角，右上角，右下角，左下角
三个值
左上角, 右上角和左下角，右下角
两个值
左上角与右下角，右上角与左下角
一个值
四个圆角值相同
2.border-image 使用图片创建边框–兼容性不好，慎用
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像是否应该平铺、铺满或拉伸
3.box-shadow 用来添加阴影
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选，阴影的颜色
inset 可选，将外部阴影（outset）改为内部阴影

        .box{
            width: 200px;
            height: 200px;
            background: pink;
            border: 0px solid red;
            box-shadow: 10px 10px 10px 10px red;
        }

练习1.：
在这里插入图片描述

二.背景

1.background-size

length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
练习：日志管理系统背景图全屏设置

2.background-origin/clip属性

padding-box 背景图像相对于内边距框来定位背景被裁剪到内边距框
border-box 背景图像相对于边框盒来定位背景被裁剪到边框盒
content-box 背景图像相对于内容框来定位背景被裁剪到内容框

3.渐变

线性渐变—Linear Gradients

语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

径向渐变—Radial Gradients

语法：background: radial-gradient(center, shape size, start-color, ..., last-color);

练习：半圆

#box1 {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			border: 1px solid black;
		    background: linear-gradient(10deg,black 50%, white 50%);
	}

在这里插入图片描述
方向还可以这么写：

#box2 {
		    background: linear-gradient(to right,red, blue);
		}
		#box3{
			 background: linear-gradient(to bottom right, red , blue);
		}

镜像渐变

#box{
			width: 600px;
			height: 400px;
			background: radial-gradient(circle at left, red, yellow, green);
		}

练习：太极图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, :before, :after {
            box-sizing: border-box;
        }
        #div1 {
            margin: 20px 200px;
            position: relative;
            width: 200px;
            height: 200px;
            background: linear-gradient(0deg, black 50%, white 50%);
            border-radius: 50%;
            box-shadow: 0 0 30px #666666;
            transition: all 6s ease-in-out;
        }
        #div1:hover{
            transform: rotate(3000deg);/*让太极动起来*/
        }
        #div1:before, #div1:after {
            content: "";
            display: block;
            position: absolute;
            width: 50%;
            height: 50%;
            top: 25%;
            border-radius: 50%;
            border:35px solid;
        }
        #div1:before {
            left: 0;
            border-color: black;
            background-color: white;
        }
        #div1:after {
            right: 0;
            border-color: white;
            background-color: black;
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

三.文本

1.text-shadow 向文本添加阴影

h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
color 可选，阴影的颜色

2.word-wrap 允许长单词换到下一行

normal 只在允许的断字点换行（浏览器保持默认处理）
break-word 在长单词或 URL 地址内部进行换行

3.text-overflow 当文本溢出包含元素时发生的事情

超出部分显示省略号
white-space:nowrap 文本不会换行，在同一行继续
overflow:hidden 溢出隐藏
text-overflow:ellipsis 用省略号来代表被修剪的文本

四.字体

@font-face {
            font-family: 'FontName';
            src: url('FileName.eot');
            src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg');
            font-style: normal;
            font-weight: normal;
 }

   .box {
         font-family: 必需。规定字体的名称
         src: 必需。定义字体文件的 URL
         font-weight: 可选。定义字体的粗细。默认是 "normal"
         font-style: 可选。定义字体的样式。默认是 "normal"
    }

五.透明度

1.opacity:0.8;
2.background:rgba(1,1,1,0.5)
区别：方法一会让子元素也透明，方法二只是背景透明

练习：
在这里插入图片描述

练习：制作透明菜单
在这里插入图片描述

吴莉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3基础

一.css3边框1.border-radius 用于创建圆角四个值左上角，右上角，右下角，左下角三个值左上角, 右上角和左下角，右下角两个值左上角与右下角，右上角与左下角一个值四个圆角值相同2.border-image 使用图片创建边框–兼容性不好，慎用border-image-source 边框图片的路径border-image-slice 图片边框向内偏移bord...
复制链接

扫一扫

专栏目录