代碼:
效果圖:
border-radius:
給元素添加圓形邊框厉萝,四個(gè)值是左上順時(shí)針旋轉(zhuǎn)四個(gè)角砌创。
transform:rotate(20deg):
元素旋轉(zhuǎn)摆尝,20deg表示順時(shí)針旋轉(zhuǎn)20度
box-shadow:
向框添加陰影亭病,box-shadow:h-shadow?v-shadow?blur?spread?color?inset;
h-shadow必需。水平陰影的位置攒至。允許負(fù)值厚者。
v-shadow必需。垂直陰影的位置迫吐。允許負(fù)值库菲。
blur可選。模糊距離志膀。
spread可選熙宇。陰影的尺寸。
color可選溉浙。陰影的顏色烫止。
inset可選。將外部陰影 (outset) 改為內(nèi)部陰影戳稽。
偽元素
氣球下面的揪是用偽元素做的馆蠕。
content是激活偽元素,必需的广鳍。
display:block;是將此元素轉(zhuǎn)化為塊元素荆几,以便指定元素位置,但是后面有
? ? ? ? ? ? position:absolute;所以display:block;在這里是可以刪除的赊时。
這個(gè)偽元素沒有設(shè)置大小吨铸,它的大小完全是由border撐起來的。將右邊框設(shè)置顏色祖秒,其他邊框設(shè)置? ? ? ? ? ? ? 透明色(transparent)就能畫出三角形诞吱,再添加圓邊框(border-radius),形成揪的形狀竭缝。