Advanced tricks in css
1. Use css to make triangles
You can make triangles directly in css:
/*html代码*/
<body>
<div class="box"></div>
hello
</body>
/*css样式*/
.box {
width: 0;
height: 0;
border: 40px solid green;
border-top-color: brown;
}
Display effect:
Change the color of the border to transparent transparent color
2. User interface style
1. Mouse style
cursor: pointer //小手模式
The mouse style has the following options
| attribute value | describe |
|---|---|
| default | white, default |
| pointer | tiny hand |
| move | move |
| text | text |
| not-allowed | prohibit |
2. Outline
To remove the outline of a text box or input box , use outline: none;
input {
outline:none; //或者设置属性值为0
}
display effect:
3. It is forbidden to drag and drop the text box to resize
When setting the text, sometimes we don't want to drag the text box , which can be achieved by setting the resize: none property.
/*html代码：*/
<label for="message">内容</label>
<textarea name="content" id="" cols="30" rows="10"></textarea>
/*css样式效果*/
textarea {
resize: none;
}
display effect:
3. vertical-align attribute:
You can use the vertical-align property to set the vertical alignment of elements . vertical-align is mainly to align form elements or images vertically with text .
Some property values of vertical-align:
| attribute value | describe |
|---|---|
| baseline | By default, the element is placed on the parent element's baseline |
| top | Align the top of the element with the top of the tallest element in the line |
| middle | Put the element in the middle of the parent element |
| bottom | Align the top of the element with the bottom of the lowest element in the row |
/*html代码编写*/
<img src="../../HTML/images/6.jpg" alt="">like U very much
/*css样式*/
img {
vertical-align: middle;
}
Display effect:
1. Use vertical-align to solve the problem
of gaps below the picture. The reason for the gaps : Inline block elements will be aligned with the baseline of the text by default.
(1 ) Remove the space left under the picture by setting the value of vertical-align to middle | top | bottom
(2) Convert the element to a block-level element : display: block;
4. The overflow text ellipsis display:
1. Single-line text overflow ellipsis display
The specific implementation process is as follows:
.content {
width: 200px;
height: 100px;
background-color: cadetblue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2. Multi-line text overflow ellipsis display:
.content1 {
width: 200px;
height: 100px;
background-color: chartreuse;
overflow: hidden;
display: -webkit-box; /* 弹性伸缩盒子模型显示 */
-webkit-line-clamp: 5; /* 限制在一个块元素显示的文本的行数 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
text-overflow: ellipsis;
}
display effect:
