CSS3 Others

In this tutorial, we will learn more interesting CSS3Features.

Using CSS3Extend User Interface

In this chapter, we will discuss some interesting CSS3propertyresize,outline-offsetetc., you can use it to improve your web page.

Adjust Element Size

You can use CSS3 The resize property allows the element to be resized horizontally, vertically, or both. However, this property is usually used to<textarea>Remove the default resizable behavior from form controls.

p, div, textarea　{
　　　　width:　300px;
　　　　min-height:　100px;
　　　　overflow: auto;
　　　　border:　1px solid black;
}
p　{
　　　resize: horizontal;　
}
div　{
　　　　resize: both;
}
textarea　{
　　　　resize: none;
}

Setting Outline Offset

In the previous section, you learned how to set different properties for the outline, such as width, color, and style. However, CSS3Another property, outline-The offset property is used to set the space between the outline and the element border. This property can accept negative values, which means you can also place an outline inside the element.

p, div　{
　　　　margin:　50px;
　　　　height:　100px;
　　　　background: #000;
　　　　outline:　2px solid red;
}
p　{
　　　　outline-offset:　10px;
}
div　{
　　　　outline-offset:　-15px;
}