Review CSS: Border attributes

Boundary is well known. Is there anything new? Well, I bet there are a lot of things you never know in this article!

You can not only use CSS3 to create rounded corners, but also use the original CSS to display custom images. This is correct (to be refined); before we found this technology, we may use Background Image Positioning to display a garden or arrow. Fortunately, we can put down the PS image processing software.

Basic

You may be familiar with the basic edge usage.

border: 1px solid black;

The above Code will apply the 1px edge to the element. It is concise and simple, but we can also make some modifications.

border-width: thick;border-style: solid;border-color: black;

In addition to specifying the Border width value, you can also use these three keywords:thin，mediumAndthick.

Although it seems that the method of a single attribute is unnecessary at first glance, there are very few cases where it is advantageous, for example, when you need to update some attributes of an edge when a specific event occurs.

You may need to change the border color of an element when you hover your mouse over it. To use compound attributes, you must repeat the pixel value and edge style.

box {    border: 1px solid red;   } .box:hover {    border: 1px solid green;}

A more elegant and concise (DRY, don't repeat yourself) approach is to update only the color attribute of the edge.

.box {    border: 1px solid red;   } .box:hover {    border-color: green;}

In addition, you will find that this single attribute method helps you create custom shapes through CSS.

Rounded corner

The representative in border-radius CSS3-the first attribute that is widely used in the Community. This means that, except for Internet Explorer 8 and earlier versions, all browsers can display rounded corners.

To make the style correctly applied, you need to add a prefix for the Webkit and Mozilla kernels.

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

However, today we do not care about the prefix, but simply stick to the official form: border-radius.

As expected, we can specify different values for each angle.

border-top-left-radius: 20px;border-top-right-radius: 0;border-bottom-right-radius: 30px;border-bottom-left-radius: 0;

In the code above, setting border-top-right-radius and border-bottom-left-radius to zero is redundant unless the element has an inherited value.

Like margin and padding, if needed, these settings can be combined into a single attribute.

/* Top left corner, top right corner, bottom right corner */border-radius: 20px 0 30px 0;

For example, you can use the border-radius attribute of CSS to simulate the shape of a lemon, as shown below:

.lemon {   width: 200px; height: 200px;    background: #F5F240;   border: 1px solid #F0D900;        border-radius: 10px 150px 30px 150px;}

Extended knowledge

Many designers have been using the knowledge listed in this chapter so far. However, there are some ways for us to further expand!

Multiple Edges

When multiple edges are applied to an element, various technologies can be referenced.

Edge style

Solid, dashed, and dotted are the most common border-style attribute values. There are several other values that we can use, including groove and ridge.

border: 20px groove #e3e3e3;

Or write it as a single attribute:

border-color: #e3e3e3;border-width: 20px;border-style: groove;

Although this looks good, the ridge or groove effect is not really multiple edges.

Profile

The most popular way to create two sides is to use the outline attribute.

.box {   border: 5px solid #292929;   outline: 5px solid #e3e3e3;}

This method is very good, but there are at most two boundaries. You need to create a layer to achieve gradient effect. You need a different method.

Pseudo element

When the profile technology cannot meet the requirements, another method is to use the: before AND: after pseudo elements and generate additional edges using the generated content.

. Box {width: 200px; height: 200px; background: # e3e3e3; position: relative; border: 10px solid green;}/* create two containers with the same width as the container */. box: after ,. box: before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0 ;}. box: after {border: 5px solid red; outline: 5px solid yellow ;}. box: before {border: 10px solid blue ;}

This may not be the most elegant method, but it does work. Note that it is easy to confuse the order of boundary colors. Make sure the sequence is correct.

Object Shadow

The cool way to create an infinite number of boundaries is to use the box-shadow attribute of CSS3.

.box {    border: 5px solid red;     box-shadow:       0 0 0 5px green,       0 0 0 10px yellow,       0 0 0 15px orange;}

In this case, we use the box-shadow attribute flexibly. This method is not intended as a css standard.

By setting the x, y, and fuzzy attributes to 0, we can use multiple values to create a solid line boundary at the desired position. Because the box-shadow attribute can be superimposed and can be separated by commas (,), unlimited values can be used.

This technology works well. In older browsers that do not recognize the box-shadow attribute, this only presents a single red 5 px boundary.

Remember: it is unnecessary to implement the same design in all browsers. Write your CSS for most modern browsers, and then provide a viable version for older browsers.

Custom Angle

Apart from passing a value to border-radius, we can also provide two -- separated by/-- to specify different values for the horizontal and vertical radius.

For example ......

Border-radius: 50px/100px;/* horizontal radius, vertical radius */

...... Equivalent:

border-top-left-radius: 50px 100px;border-top-right-radius: 50px 100px;border-bottom-right-radius: 50px 100px;border-bottom-left-radius: 50px 100px;

This technique is especially useful when you need to simulate a gentle, lengthy curve, rather than a general rounded corner. For example, the following code allows us to slightly deform a square shape to simulate the same effect as more paper rolls.

.box {    width: 200px; height: 200px;    background: #666;     border-top-left-radius: 15em 1em;    border-bottom-right-radius: 15em 1em; }

CSS shape

Perhaps the most simple thing is to directly use the boundary to cleverly apply the boundary to elements of width and height. Confusing, right? Let's take a look at a demonstration.
In the following examples, let's assume that ......

...... And the basic style is as follows:

.box {   width: 200px;   height: 200px;   background: black;}

The most common example is how to create an arrow using CSS shapes.

The key is to learn how to use CSS to generate arrows, set different colors for each edge, and reduce the width and height of the container to zero.

Assume that a div with an arrow class is used as a container:

.arrow {  width: 0; height: 0;   border-top: 100px solid red;  border-right: 100px solid green;  border-bottom: 100px solid blue;  border-left: 100px solid yellow;  }

At the beginning of this chapter, the cleaner syntax does not use the composite Syntax:

.arrow {  width: 0; height: 0;   border: 100px solid;   border-top-color: red;  border-right-color: green;  border-bottom-color: blue;  border-left-color: yellow;}

We can even further streamline it by merging color values.

.arrow {  width: 0; height: 0;   border: 100px solid;  border-color: red green blue yellow;}

Very interesting, isn't it? However, it is more interesting to move back. What if we set all the border-colors except the blue edge to transparent?

.arrow {  width: 0; height: 0;   border: 100px solid;  border-bottom-color: blue;}

Great! However, creating an arrow with a div does not seem to conform to semantics. However, related pseudo elements such as after or before can be used to create arrows. Create a bubble

Create a 100% CSS bubble and we will take the following mark exam.

Hi there!

Next, apply some basic styles.

. Speech-bubble {position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px;/* vertical center */color: white; text-align: center ;}

The arrow is implemented through the after pseudo element.

.speech-bubble:after {    content: '';   }

: Before AND: after pseudo elements can be used to insert the generated content before or after the element content.

Next, simply copy the arrow and locate the appropriate position. We start to reset the width and height through the absolute positioning content, and apply the border color.

.speech-bubble:after {  content: '';  position: absolute;   width: 0;  height: 0;   border: 10px solid;  border-color: red green blue yellow;}

Because we know that we want the downward arrow, the above picture shows that all except the red (or upper) border should be omitted or set to transparent.

.speech-bubble:after {  content: '';  position: absolute;   width: 0;  height: 0;   border: 10px solid;  border-top-color: red;}

When the CSS shape is created, the border-width attribute should be used instead of the width attribute to specify the arrow width. In this case, the arrow should be larger; therefore, border-width can be increased to 15 px. We move the arrow to the center at the bottom of the container by using the top and left attributes.

.speech-bubble:after {  content: '';  position: absolute;   width: 0;  height: 0;   border: 15px solid;  border-top-color: red;   top: 100%;  left: 50%;}

The last step is to update the arrow color, which is the same as the background color of the container. You also need to modify the location according to the Border width (15 px ). Here, we will also apply a subtle border-radius attribute to make the container more like a bubble.

. Speech-bubble {/*... Other style */border-radius: 10px ;}. speech-bubble: after {content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left:-15px;/* adjust the Border Width */}

Yes, isn't it? Abstract This code into several reusable classes and apply it to your future projects.

/* Dialog bubble usage: Use. speech-bubble and. speech-bubble-DIRECTION class Hi there */. speech-bubble {position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px;/* vertical center */color: white; text-align: center; border-radius: 10px; font-family: sans-serif ;}. speech-bubble: after {content: ''; position: absolute; width: 0; height: 0; border: 15px solid;}/* arrow position */. speech-bubble-top: after {border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left:-15px ;}. speech-bubble-right: after {border-left-color: #292929; left: 100%; top: 50%; margin-top:-15px ;}. speech-bubble-bottom: after {border-top-color: #292929; top: 100%; left: 50%; margin-left:-15px ;}. speech-bubble-left: after {border-right-color: #292929; top: 50%; right: 100%; margin-top:-15px ;}

Supplement: Better vertical center

One disadvantage of vertical center using line-height is that only one row is allowed. When two or more lines of text are required, the height of each line is too large. A clever solution is to set the display attribute of the bubble to table and the display of the wrapped section text to table-cell. This allows us to set the text to vertical center.

    
Text goes here.

Next, modify CSS.

. Speech-bubble {/* Other style */display: table;}. speech-bubble p {display: table-cell; vertical-align: middle ;}

If you reference the display: table, it will bring you old-fashioned memories of terrible table la S. Don't worry. These attributes refer to the display style of an element.

We are not limited to triangles; CSS can produce various shapes, even heart and biological hazard signs!

.biohazard {  width: 0; height: 0;   border: 60px solid;  border-radius: 50%;   border-top-color: black;  border-bottom-color: black;  border-left-color: yellow;  border-right-color: yellow;}

Summary

Although the simplest border: 1px solid black syntax is helpful, if we are smart, we can create a variety of useful effects, icons and shapes. Who will think that boundary can be so powerful? The key is to remember that common shapes or dialog box styles should be created only once, and practical classes should be abstracted for future use.

Note

Original article: CSS Refreshers: Borders

Q group recommendation

CSS home 188275051, a paradise for CSS developers. You are welcome to join us.

JavaScript home 159973528: a paradise for JavaScript developers. You are welcome to join us.

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + CjxpbWcgc3JjPQ = "http://www.2cto.com/uploadfile/Collfiles/20140223/20140223092222136.png" alt = "\"> support me to continue the translation.

For more articles, visit my blog.

Follow my weibo posts.