search
HomeWeb Front-endHTML TutorialCSs3_html/css_WEB-ITnose

CSS3的三部曲:设置字体,设置宽度和高度及盒模型,设置链接。其中,字体包括字体组,字体大小,行高,颜色。第二部包括宽度和高度及margin,padding,(margin:0 auto是实现居中)。链接文本样式包括link.hover,visitied,active 4种状态。实现的部分包括,字体,整体背景,页面宽度,链接样式。

前缀:-webkit---chrome and safari;

 -moz---firefox;

-ms---IE;

-o---opera;

CSS3的新增样式:

1、border-radius:圆角效果{实心上半圆:高度Height是宽度width的一半,设置左右上角与高度一致;实心圆:高度Height和宽度width的一样,设置四个角为他们的一半;}从左上开始,顺时针旋转开始。

2、box-shadow:盒子阴影{X偏量,Y偏量,阴影模糊值,阴影扩展半径,阴影颜色,投影方式(inset为内投影,只能写在第一个或者最后一个)}当偏移量为负值时,表示在相反位置。

3、text-shadow:文本阴影与盒子阴影相似。

4、border-image:边框颜色:{:URL(),round表示平铺/repeat表示重复/stretch表示拉伸}

5、border-color:边框颜色:低,顶,左,右

6、透明度{两种表示方法 1、rgba(255,255,255,0.2)表示白色的不透明度为0.2,rgba(0,0,0,0.2)表示黑色的不透明度为0.2。 2、opacity:0.2}

7、渐变色彩:{包括线性和径向:linear-gradient 、radial-gradient}

8、text-overfiow{溢出时省略标记,代码如下:(text-over:ellipsis/表示省略;overflow:hidden;white-space:nowrap;)clip表示中断;

 而word-wrap:normal表示连续/break-word表示中断。

9、@font-face表示侵入服务器端的字体文件。

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3什么是自适应布局css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

css3线性渐变可以实现三角形吗css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

一文了解CSS3中的新特性 ::target-text 选择器一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment