2
A
回答
5
使用絕對定位僞元素來達到同樣的目的。在下面的示例中,我使用的是絕對定位的::before
,並將其設置爲父級的全高(使用top: 0; bottom: 0;
技巧)。然後,您可以簡單地設置一個寬度並使用寬度的一半即可實現圓角的border-radius
。
p {
position: relative; /* Required so that pseudo-element is positioned correctly */
padding-left: 30px; /* Dummy value to make space for pseudo-element */
}
p::before {
/* Create pseudo-element and give it content */
content: '';
display: block;
/* Position it in its parent so that it is:
* - to the left
* - occupies full height
*/
position: absolute;
top: 0;
left: 0;
bottom: 0;
/* Give it a fixed width and rounded corners */
width: 10px;
border-radius: 5px;
/* Appearance */
background-color: steelblue;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin metus tincidunt felis maximus, maximus sollicitudin mi ultrices. Curabitur libero arcu, bibendum ac suscipit ut, elementum scelerisque lacus. Praesent ultricies commodo porttitor. Fusce eget velit nisi. Praesent vulputate venenatis dui, efficitur sollicitudin nisi pulvinar a.</p>
1
試試這個:
.txt {
width: 400px;
position: relative;
}
.txt:before {
content: '';
width: 10px;
height: 100%;
position: absolute;
background-color: skyblue;
border-radius: 5px;
}
p {
margin-left: 20px;
}
<div class="txt">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin metus tincidunt felis maximus, maximus sollicitudin mi ultrices. Curabitur libero arcu, bibendum ac suscipit ut, elementum scelerisque lacus. Praesent ultricies commodo porttitor. Fusce eget velit nisi. Praesent vulputate venenatis dui, efficitur sollicitudin nisi pulvinar.
</p>
</div>
相關問題
- 1. 什麼是最簡單的方法來構建條形圖的條形圖
- 2. 繪製簡單的圓形
- 3. 更簡單的方法來用SE來繪製條形圖
- 4. 使文本遵循KineticJS中圓形曲線的最簡單方法是什麼?
- 5. 在LaTeX中繪製條形圖的最佳方法是什麼?
- 6. 什麼是最簡單的方法來創建Django的形式
- 7. 什麼是最好的,最簡單的繪製一個多條形圖在php
- 8. 最簡單的繪製線條,點,像素的方法?
- 9. 在舞臺周圍繪製邊框的最簡單方法是什麼?
- 10. 在matlab中繪製TSP圖的最簡單方法是什麼?
- 11. 用OpenGL ES繪製紋理最簡單的方法是什麼?
- 12. 在iPhone上繪製點的最簡單方法是什麼?
- 13. 動畫線條最簡單的方法是什麼?
- 14. 是否有更簡單的方法來製作段落? (Html)
- 15. 繪製移動線條/曲線的最佳方式是什麼?
- 16. 爲多邊形輪廓繪製圓圈的最有效方法
- 17. 什麼是在Android中繪製水平條的最簡單方法?
- 18. 使用d3,在地圖上繪製10000平方公里多邊形的最簡單方法是什麼?
- 19. 使用three.js繪製一個切割出圓柱體的圓柱體的最簡單方法是什麼?
- 20. 繪製線段以便可視化某些算法的輸出最簡單的方法是什麼?
- 21. 獲取線段的方位(角度)的最簡單方法是什麼?
- 22. 什麼是最簡單的方法來獲取圓角opengl多維數據集
- 23. 製作圓形動畫的最簡單方法
- 24. 在Windows窗體中繪製立方體的最簡單方法是什麼?
- 25. 如何繪製帶有圓角的正方形的線條?
- 26. 從Illustrator到Java獲取多邊形的最簡單方法是什麼?
- 27. 更簡單的方法來繪製?
- 28. 什麼是最簡單的方法來在html下拉框文本旁邊有圖像組合框
- 29. 跨線程Winforms的最簡單的方法是什麼?
- 30. 刪除<fieldset>邊界線最簡單的方法是什麼?