Css:border Property

The frontier is well known, is there anything new? Well, I bet, in this article, there are a lot of things you don't see that you never know!

Not only can you use CSS3 to create rounded corners, you can display custom graphics as you would with existing CSS. This is correct (to be studied); In the past, we may use background image positioning to display a garden or an arrow before this technique is discovered. Fortunately, we can put the PS image processing software down.

Basis

You may be familiar with the most basic usage of edges.

BORDER:1PX solid black;

The above code will apply a 1px edge to the element. That is concise and simple, but we can also make a slight change.

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

In addition to specifying a specific border width value, you can also use these three keywords: thin， medium and thick .

While it is not necessary at first glance to look at a single attribute, there are very few cases when it is advantageous, such as when you need to update the partial properties of an edge when a particular event occurs.

Perhaps you need to change the border color of this element when the user hovers over a specific element. Using a composite property requires repeating the pixel values and the edges of the 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 properties of the edges.

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

In addition, you'll find in a few ways that this single attribute helps create custom shapes from CSS.

Rounded Corners

the representative of Border-radius CSS3-the first to be widely used in the community new attributes. This means that, with the exception of Internet Explorer 8 and earlier, all browsers can display rounded corners.

In order for the style to be applied correctly, you need to prefix the WebKit and Mozilla Kernels.

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

However, today we do not care about prefixes, only simply adhere to the official form: Border-radius.

As you might have expected, we can specify a different value for each corner.

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

In the preceding code, setting Border-top-right-radius and Border-bottom-left-radius to zero is superfluous unless the element has an inherited value.

Just like margin and padding, these settings can be combined into a single property if needed.

/* upper left corner, upper right corner, lower right corner, lower left corner */border-radius:20px 0 30px 0;

For example (often done by web designers), you can use CSS's Border-radius properties to simulate the shape of a lemon, as follows:

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

Expand your knowledge

Many designers have been using the knowledge listed in this chapter so far, however, there are some ways we can further expand!

Multiple edges

When applying multiple edges to an element, there are a variety of techniques to refer to.

The style of the edge

Solid,dashed and dotted are the most commonly used Border-style property values, and there are several other values that we can use, including Groove and Ridge.

border:20px Groove #e3e3e3;

or write as a single attribute form:

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

While this looks good, the ridge or groove effect is not really multiple sides.

Contour

The most popular way to create two edges is to take advantage of the outline property.

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

This method behaves very well, however, with a maximum of two boundaries. You should create a layer that implements the gradient gradient effect and requires a different approach.

Pseudo element

When contour technology fails to meet the requirements, another approach is to leverage: before and: After pseudo-elements, and generate additional edges with 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. The point to note is that it is easy to confuse the order of border colors. Ensure the correct sequence.

Object Shadow

A cool way to create an infinite number of boundaries is to take advantage of the CSS3 Box-shadow property.

. 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 have the flexibility to use the Box-shadow property, which is not the intent of the CSS specification.

By setting x, Y, and the Blur property to 0, we can use multiple values to create a solid boundary at the desired location. Because the Box-shadow property can be superimposed, separated by commas, an infinite number of values can be used.

this technique works well. in an older browser that does not recognize the Box-shadow property, this only renders a single red 5 px boundary.

Remember: It is not necessary to implement the same design in all browsers. Write your CSS for most modern browsers and then provide a workable fallback version for older browsers.

Custom angle

In addition to passing a value to Border-radius, we can also provide two-by/delimited-to specify different values for the horizontal and vertical radii.

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 flat, lengthy curve rather than a universal rounded corner. For example, the following code allows us to deform a square shape slightly, simulating more paper-like effects.

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

CSS shapes

Perhaps the simplest is to use the boundary directly, giving a clever application boundary to the width and height of the element. confusing, isn't it? Let's take a look at a demo.
In the next few examples, assume the following markup ...

<p class= "box" ></p>

...... And the basic style are 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 generate arrows with CSS by setting different colors for each edge and reducing the width and height of the container to zero.

Suppose a p with the Arrow class 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 is not to use compound 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 refine further by merging the color values.

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

It's funny, isn't it? However, it is more interesting when we step back. Now, 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;}

That's great! But creating an arrow with P doesn't seem to be semantically consistent. However, you can use the related pseudo-elements such as after or before to create arrows.

Create a bubble

Create a 100%css bubble and we'll mark the exam from below.

<p class= "speech-bubble" >hi there!</p>

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 arrows are implemented by 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 arrows and navigate to the appropriate location. We start by absolutely positioning the content, resetting the width and height, and applying 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 we want the downward arrow, the picture above shows that the other than 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 you create a CSS shape, you should use the Border-width property instead of specifying the width of the arrowhead by using the Width property. In this case, the arrows should be larger, so the border-width can be added to the PX. We position the arrows centered on the bottom of the container by taking advantage of the top and left properties.

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

It's almost over here; the last step is to update the arrows with the same color as the container's background. The positioning also needs to be modified, depending on the width of the boundary (PX). When we are here, we will also apply a subtle Border-radius property to make the container more like a bubble.

. speech-bubble {/   * ... Other styles *   /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 Border Width */}

Not bad, is it? Abstract this code into a few reusable classes that you can apply to your future projects.

{:;:;:;:;:; :;:;:;:;} {:;:;:;:;:;}  {:;:;:;:;  } {:;:;:;:;   } {:;:;:;:;  } {:;:;:;:;   }

Added: Better vertical centering

one disadvantage of using line-height to achieve vertical centering is that it is limited to a single line. When text takes two or more lines, the height of each row is too large. A smart solution is to set the display property of the bubble to table, and the display of the wrapped paragraph text is table-cell. This allows us to set the text to be centered vertically.

<p class= "Speech-bubble speech-bubble-top" >    <p>text goes here.</p></p>

Next, modify the CSS.

. speech-bubble {/* Other styles */   display:table;}. speech-bubble p {  Display:table-cell;  Vertical-align:middle;}

Don't worry if the reference display:table brings an old-fashioned memory of a horrible tabular layout. These properties refer to the style that displays an element.

We are not limited to triangles; CSS can produce a variety of 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;}

Summarize

While the simplest border:1px solid black syntax is helpful, if we are smart, we can create various beneficial effects, icons and shapes. Who would have thought that borders could be so powerful? The key is to remember that common shapes or dialog box styles should only be created once and then abstracted out of the practical class for future use.