What three new border effects are added to css3?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What three new border effects are added to css3?

青灯夜游

Apr 25, 2022 pm 04:30 PM

css3

There are three new border effects in css3: 1. Border image "border-image", which can add a background image to the border; 2. Border rounded corners "border-radius", which can add one or more A rounded corner effect; 3. Border shadow "box-shadow", which can add one or more shadows to the element box.

What three new border effects are added to css3?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css3 adds three new border effects

##box-shadowAppend the shadow of one or more drop-down boxes3##

1. Border image "border-image"

border-image property can add a background image to the border. The latest versions of all major browsers now support the border-image attribute.

Syntax:

What three new border effects are added to css3?

Description:

border-image attribute needs to be defined 3 aspects of content.

(1) Picture path.

(2) Cutting width: the cutting width of the four sides, in order: upper edge, right edge, lower edge, and left edge (clockwise).

(3) Tiling method: There are three values, namely repeat, round and stretch.

In all the examples in this section, we use the 90px×90px picture shown in the picture as the background picture of the border.

What three new border effects are added to css3?

Code example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

The browser preview is as shown below.

What three new border effects are added to css3?

Analysis:

From the preview effect, we can know that the numbers 1, 3, 7, and 9 located at the 4 corners are still Obediently located at the 4 corners. Then the 4 borders 2, 4, 6, and 8 will be continuously tiled.

Regarding the border-image attribute, we summarize it as follows:

(1) When making a border background image, 4 sides should be made, and the middle part needs to be hollowed out.

(2) The width of each side of the border background image should be the same as the corresponding border width (i.e. border-width).

2. Border rounded corners “border-radius”

The border-radius attribute can add a rounded corner effect to the border

## The #border-radius attribute defines the radius of the corner of the element. Through the CSS border-radius attribute, the "rounded corner" style of any element can be achieved.

Syntax:

border-radius: none　｜　length{1,4} [/ length{1,4}

Each value can be in the form of a numerical value or a percentage.

length/length The first length represents the radius in the horizontal direction, and the second represents the radius in the vertical direction.

If it is a value, then the four values of top-left, top-right, bottom-right, and bottom-left are equal.

If there are two values, then top-left and bottom-right are equal and are the first value, and top-right and bottom-left are equal and are the second value.

What three new border effects are added to css3? If there are three values, then the first value is to set top-left, and the second value is top-right and bottom-left and they will be equal, and the third value is to set bottom-right.

If there are four values, then the first value is to set top-left, and the second value is to set top-right, the third value is to set bottom-right, and the fourth value is to set bottom- left

What three new border effects are added to css3?

In addition to the above abbreviations, you can also write the four corners separately like border, as follows:

border-top-left-radius: //左上角 
border-top-right-radius: //右上角 
border-bottom-right-radius: //右下角 
border-bottom-left-radius: //左下角

are the horizontal directions respectively and the vertical radius. When the second value is omitted, the horizontal and vertical radii are equal.

border-radius only supports the border-radius standard syntax format in the following versions of browsers: Firefox4.0, Safari5.0, Google Chrome 10.0, Opera 10.5, and IE9. For older browsers, border-radius needs to be based on Different browser kernels add different prefixes. For example, the Mozilla kernel needs to add "-moz", and the Webkit kernel needs to add "-webkit", etc. However, IE and Opera do not have private formats, so in order to maximize browser compatibility , we need to set it as follows:

-webkit-border-radius: 10px 20px 30px; 
-moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px;

Please write the standard form after the browser private form.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
img {
border-radius: 30px;
margin: 100px;
}
</style>
</head>
<body>
<img  src="/static/imghwm/default1.png"  data-src="../images/photo.jpg"  class="lazy"      style="max-width:90%" alt="What three new border effects are added to css3?" >
</body>
</html>

What three new border effects are added to css3?

##3. Border shadow “box-shadow”In CSS, you can use the box-shadow attribute to achieve the border shadow effect. The box-shadow attribute can set one or more drop-down shadow boxes.

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

Possible values:

Attribute	Description	CSS
border-image	Sets the shorthand properties for all border images.	3
border-radius	A shorthand property for setting all four border-*-radius properties	3

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

box-shadow属性的使用

1、水平垂直偏移为0也可以有阴影

如果offset-x或offset-y值为0，则阴影在元素背后，此时给blur-radius值或spread值可以产生阴影效果。

例子：

第一个div通过设置blur-radius产生阴影效果。

第二个div通过设置spread正值产生阴影效果。

第三个div通过设置spread负值产生阴影效果。

但是有一点要注意：扩展阴影必须和阴影模糊半径配合使用。

我个人觉得应该是没有配合使用这一说，但不可能只设置扩展阴影，因为扩展阴影和阴影模糊的取值都可以为正。如果只有扩展阴影的话，会被浏览器当做模糊阴影来解析，所以也可以简单理解为“扩展阴影必须和阴影模糊半径配合使用”，如果只用扩展阴影，可以写成：box-shadow:0 0 0 1px;。
<style type="text/css"> div{ width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; } .blur{ box-shadow: 0 0 20px ; /*box-shadow: 0 0 20px green;*/ /*也可以自定义颜色*/ } .spread-positive{ box-shadow: 0 0 20px 5px ; /* box-shadow: 0 0 20px 5px green;*/ /*也可以自定义颜色*/ } .spread-negative{ box-shadow: 0 0 20px -5px ; /* box-shadow: 0 0 20px -5px green;*/ /*也可以自定义颜色*/ } </style> <body> <div class="blur"></div> <div class="spread-positive"></div> <div class="spread-negative"></div> </body>

2、设置水平垂直偏移得到阴影效果

outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。

inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。

例子:
<style type="text/css"> div{ width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; } .shadow0{box-shadow: 0 0;} .shadow1{box-shadow: 1px 1px;} .shadow10{box-shadow: 10px 10px;} .inset-shadow0{box-shadow: 0 0 inset;} .inset-shadow1{box-shadow: 1px 1px inset;} .inset-shadow10{box-shadow: 10px 10px inset;} </style> <body> <div class="shadow0"></div> <div class="shadow1"></div> <div class="shadow10"></div> <div class="inset-shadow0"></div> <div class="inset-shadow1"></div> <div class="inset-shadow10"></div> </body>

3、投影方式

投影方式默认是outset，即外部投影，可设置inset让向内投影。

例子：第一个div默认outset，第二个设置inset，第三个同时设置两个阴影可以更好的看到outset和inset的关系，第四个div可以看出inset阴影在背景之上，内容之下。
<style type="text/css"> div{ width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; vertical-align: top; } .outset{ box-shadow: 10px 10px teal; } .inset{ box-shadow: 10px 10px teal inset; } .double{ box-shadow: 10px 10px teal inset,10px 10px teal; } .bg{ background-color: yellow; } </style> <body> <div class="outset"></div> <div class="inset"></div> <div class="double"></div> <div class="inset bg">inset阴影在背景之上，内容之下</div> </body>

4、如果元素同时指定border-radius属性，则阴影呈现相同的圆角。
<style type="text/css"> div{ width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; border-radius: 50px; } .shadow{ box-shadow: 0 0 10px 10px green; } </style> <body> <div class="shadow"></div> </body>

（学习视频分享：css视频教程、web前端）

The above is the detailed content of What three new border effects are added to css3?. For more information, please follow other related articles on the PHP Chinese website!

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 IDs vs Classes: which is better for accessibility?May 10, 2025 am 12:02 AM

Classesarebetterforaccessibilityinwebdevelopment.1)Classescanbeappliedtomultipleelements,ensuringconsistentstylesandbehaviors,whichaidsuserswithdisabilities.2)TheyfacilitatetheuseofARIAattributesacrossgroupsofelements,enhancinguserexperience.3)Classe

CSS: Understanding the Difference Between Class and ID SelectorsMay 09, 2025 pm 06:13 PM

Classselectorsarereusableformultipleelements,whileIDselectorsareuniqueandusedonceperpage.1)Classes,denotedbyaperiod(.),areidealforstylingmultipleelementslikebuttons.2)IDs,denotedbyahash(#),areperfectforuniqueelementslikeanavigationmenu.3)IDshavehighe

CSS Styling: Choosing Between Class and ID SelectorsMay 09, 2025 pm 06:09 PM

In CSS style, the class selector or ID selector should be selected according to the project requirements: 1) The class selector is suitable for reuse and is suitable for the same style of multiple elements; 2) The ID selector is suitable for unique elements and has higher priority, but should be used with caution to avoid maintenance difficulties.

HTML5: LimitationsMay 09, 2025 pm 05:57 PM

HTML5hasseverallimitationsincludinglackofsupportforadvancedgraphics,basicformvalidation,cross-browsercompatibilityissues,performanceimpacts,andsecurityconcerns.1)Forcomplexgraphics,HTML5'scanvasisinsufficient,requiringlibrarieslikeWebGLorThree.js.2)I

CSS: Is one style more priority than another?May 09, 2025 pm 05:33 PM

Yes,onestylecanhavemoreprioritythananotherinCSSduetospecificityandthecascade.1)Specificityactsasascoringsystemwheremorespecificselectorshavehigherpriority.2)Thecascadedeterminesstyleapplicationorder,withlaterrulesoverridingearlieronesofequalspecifici

What are the significant goals of the HTML5 specification?May 09, 2025 pm 05:25 PM

ThesignificantgoalsofHTML5aretoenhancemultimediasupport,ensurehumanreadability,maintainconsistencyacrossdevices,andensurebackwardcompatibility.1)HTML5improvesmultimediawithnativeelementslikeand.2)ItusessemanticelementsforbetterreadabilityandSEO.3)Its

What are the limitations of React?May 02, 2025 am 12:26 AM

React'slimitationsinclude:1)asteeplearningcurveduetoitsvastecosystem,2)SEOchallengeswithclient-siderendering,3)potentialperformanceissuesinlargeapplications,4)complexstatemanagementasappsgrow,and5)theneedtokeepupwithitsrapidevolution.Thesefactorsshou

React's Learning Curve: Challenges for New DevelopersMay 02, 2025 am 12:24 AM

Reactischallengingforbeginnersduetoitssteeplearningcurveandparadigmshifttocomponent-basedarchitecture.1)Startwithofficialdocumentationforasolidfoundation.2)UnderstandJSXandhowtoembedJavaScriptwithinit.3)Learntousefunctionalcomponentswithhooksforstate

See all articles