CSS3 了解过的样式记录_html/css_WEB-ITnose
一、CSS3边框
1、圆角border-radius
border-radius:值越大，角越圆；
div{ width:100px; height:100px; background-color:red; border-radius:10px; border-top-left-radius:20px;}- border-top-left-radius:2em;
- border-top-right-radius:2em;
- border-bottom-right-radius:2em;
- border-bottom-left-radius:2em;
也可以根据上面4个参数，单独设置某个角。
2、阴影box-shadow
div{ width:100px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #d8d8d8;}box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:水平向右偏移量；
v-shadow:垂直向下偏移量；
blur:模糊距离；
spread:阴影尺寸；
color:阴影颜色；
inset:改为内阴影；
3、边框图片 border-image
- border-image-source 用在边框的图片的路径。
- border-image-slice 图片边框向内偏移。
- border-image-width 图片边框的宽度。
- border-image-outset 边框图像区域超出边框的量。
- border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
二、CSS3 背景
1、background-size:控制背景图片的大小；
background-size:20px 20px;
2、background-origin:3个属性可选；
- padding-box 背景图像相对于内边距框来定位。
- border-box 背景图像相对于边框盒来定位。
- content-box 背景图像相对于内容框来定位。
3、background-clip：规定背景的绘制区域。
- padding-box 背景图像相对于内边距框来定位。
- border-box 背景图像相对于边框盒来定位。
- content-box 背景图像相对于内容框来定位。
另外在CSS3中，background-image:可以设置多张图片了。
background-image:url(1.gif),url(2.gif);
三、过渡transition
- transition:简写属性，用于在一个属性中设置四个过渡属性。
- transition-property:规定应用过渡的 CSS 属性的名称。
- transition-duration:定义过渡效果花费的时间。默认是 0。
- transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。
- transition-delay:规定过渡效果何时开始。默认是 0。
其中transition-timing-function过渡时间，有以下几种，你可以规定它过渡的速度。
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
<!DOCTYPE html><html><head><style> div{ width:200px; height:200px; background-color:#d8d8d8;}div:hover{ width:300px; transition: width 2s;}</style></head><body> <div></div></body></html>鼠标移上3D转换360度。
div:hover{ transform: rotateY(360deg); transition: transform 2s;}四、CSS动画
<!DOCTYPE html><html><head><style> div{ width:100px; height:100px; background-color:#d5d5d5; color:white; animation:myfirst 5s;}@keyframes myfirst{ from {margin-left:20px;} to {margin-left:520px;transform: rotateY(360deg);}}</style></head><body><div> 飞啊飞</div></body></html>以上是改变位置，并且一边移动一边旋转的动画。
<!DOCTYPE html><html><head><style> div{ width:100px; height:100px; background-color:#d5d5d5; color:white; animation:myfirst 5s infinite;}@keyframes myfirst{ 0% {margin-left:20px;} 25% {margin-left:520px;transform: rotateY(360deg);} 50% {margin-top:120px;transform: rotateX(180deg);} 75% {margin-left:320px;transform: rotateY(360deg);} 100% {margin-top:0px;transform: rotateX(180deg);}}</style></head><body><div> 飞啊飞</div></body></html>属性自己去查吧。太多。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
