search
HomeWeb Front-endHTML Tutorial[译](深入了解CSS Box Shadow)_html/css_WEB-ITnose

原文:A Close Look at CSS Box Shadow

CSS的box-shadow可以被用来给块级元素一个外阴影或者是内阴影。接下来让我们仔细地看一下这个CSS的特性吧。

举例

下面有三个把CSS的box-shadow属性使用在div里的例子。

 例1:简单的外阴影

下面是是给副标题添加阴影的样式。

box-shadow:0 0 10px gray;

例2:内阴影

一个内阴影可以通过使用inset属性值来渲染出来。

box-shadow:inset 0 0 10px;

例3:偏移外阴影

这个例子中我们通过水平和垂直方向下和右偏移5px来实现阴影向右下方偏移

box-shadow:5px 5px 10px;

加入你想要阴影向左上方偏移呢?我们可以通过将水平和垂直方向的偏移量设置为-5px,正如下面的例子:

box-shadow:-5px -5px 10px;

既然你已经看到了box-shadow在现实中的使用,接下来让我们更加深入地了解一下。

语法

box-shadow的一般语法如下:

box-shadow:[inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color]

CSS属性值

CSS的box-shadow可能会有6个属性值:

  • inset

  • horizontal offset

  • vertical offset

  • blur radius

  • spread distance

  • color

  • 只有两个属性是必须的:水平偏移和垂直偏移量。

    四个属性值,水平偏移,垂直偏移,模糊半径,扩展距离,必须使用CSS长度单元(比如:px,em,%等)

    这个颜色值必须是必须是一个颜色单元,比如十六进制值(如:#000000)。

    属性和值总结表

    属性 是否必须 单位 默认值
    inset 不是 关键词 没有指定的时候,阴影默认在外面
    水平偏移 长度 没有默认值,一定有指定
    垂直偏移 长度 没有默认值,一定要指定
    模糊半径 不是 长度 0
    扩展距离 不是 长度 0
    颜色 不是 颜色 和box shadow属性作用的元素的color值一样

    inset

    如果inset关键词存在,盒阴影将会放在HTML元素的内部

    box-shadow:inset 0 0 5px 5px olive;

    作为对比,这里是一个没有inset属性的box-shadow样式。

    box-shadow:0 0 5px 5px olive;

    水平偏移

    水平偏移控制了盒子阴影在x轴的偏移。正值会把盒子的阴影向右移动,负值的话会把它向左移动。

    下面的例子中,我们把水平的偏移设置成20px,刚好是水平偏移量的两倍,所以阴影水平宽度刚好是垂直高度的两倍。

    box-shadow:20px 10px;

    垂直偏移

    垂直偏移控制了盒阴影在y轴的偏移量。正值会把盒子的阴影向下移动,负值刚好相反会把盒子网上移动。

    下面的例子中,垂直的偏移设置成-20px,刚好是水平偏移的两倍。同时,因为是负值,所以向上移动。

    box-shadow:10px -20px;

    模糊半径

    这个模糊半径会影响到阴影的模糊和锐利程度。

    模糊半径是可选的,如果你不指定它,默认值是0.另外,你不能指定它为负值,这个和水平偏移和垂直偏移不一样。

    如果模糊半径是0,盒子阴影会很锐利并且它的颜色是很实的。随着你不断的增大这个值,它会变得越来越模糊和透明。

    下面的例子,模糊半径被设置成20px,因此模糊度是相当突出。

    box-shadow:5px 5px 20px;

    扩展距离

    这个扩展距离会让盒子的阴影在各个方向上都会变大或变小。如果它有一个正值,盒子阴影会在各个方向上增加大小。如果是负值,则会在各个方向上收缩。

    值得注意的是,因为它的扩展距离是正5,所以会在各个方向上增加10px因为没有水平和垂直偏移。

    box-shadow:0 0 10px 5px;

    当扩展距离是负的时候,阴影就会在各个方向上收缩。下面的例子展示当阴影的宽度比盒子小的时候的情况

    box-shadow:0 10px 10px -5px;

     颜色

    通过名字你就可以判断出来,颜色值会设置盒阴影的颜色。它可以通过任何可以表示颜色的方式来表示颜色。是否设置颜色值是可选的。

    换句话说,默认情况下当你没有指明颜色值,阴影颜色会等于这个盒子对应的html元素的颜色值。比如有一个div的颜色被设置成红色,这个盒子阴影的颜色也会变成红色:

    color:red;box-shadow:0 0 10px 5px;

    如果你想要设置阴影的颜色和div的颜色不一样,可以通过下面的方式,你会发现尽管你的文字颜色是红色,盒子阴影颜色依然可以是蓝色。

    color:red;box-shadow:0 0 10px 5px blue;

    多阴影效果

    这个就是能够让我们变得有创造力的CSS属性。你能够在一个盒子上设置多个阴影。

    语法就像下面这样。

    box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

    换句话说,你可以通过在每个属性设置组后面添加逗号(,)来实现多阴影。

    下面的例子展示了两个阴影的情况,左上方红色的阴影,右下方蓝色的阴影。

    box-shadow: -5px -5px 30px 5px red,         5px 5px 30px 5px blue;

    浏览器支持

    这个CSS的box-shadow属性有着很好地浏览器支持。使用这个属性在拖后腿的IE浏览器也能在IE9以后得到支持啦。

    查看演示

    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
    What are self-closing tags? Give an example.What are self-closing tags? Give an example.Apr 27, 2025 am 12:04 AM

    Self-closingtagsinHTMLandXMLaretagsthatclosethemselveswithoutneedingaseparateclosingtag,simplifyingmarkupstructureandenhancingcodingefficiency.1)TheyareessentialinXMLforelementswithoutcontent,ensuringwell-formeddocuments.2)InHTML5,usageisflexiblebutr

    Beyond HTML: Essential Technologies for Web DevelopmentBeyond HTML: Essential Technologies for Web DevelopmentApr 26, 2025 am 12:04 AM

    To build a website with powerful functions and good user experience, HTML alone is not enough. The following technology is also required: JavaScript gives web page dynamic and interactiveness, and real-time changes are achieved by operating DOM. CSS is responsible for the style and layout of the web page to improve aesthetics and user experience. Modern frameworks and libraries such as React, Vue.js and Angular improve development efficiency and code organization structure.

    What are boolean attributes in HTML? Give some examples.What are boolean attributes in HTML? Give some examples.Apr 25, 2025 am 12:01 AM

    Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values ​​need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

    How can you validate your HTML code?How can you validate your HTML code?Apr 24, 2025 am 12:04 AM

    HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

    HTML vs. CSS and JavaScript: Comparing Web TechnologiesHTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AM

    HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

    HTML as a Markup Language: Its Function and PurposeHTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

    The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

    The Future of HTML, CSS, and JavaScript: Web Development TrendsThe Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

    The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

    HTML: The Structure, CSS: The Style, JavaScript: The BehaviorHTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

    The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

    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

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    mPDF

    mPDF

    mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    MantisBT

    MantisBT

    Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

    SecLists

    SecLists

    SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.