在CSS3中創建一個形狀如下所示時,最好的方法是記住我希望儘可能保留大部分樣式?CSS3形狀比例
Q
CSS3形狀比例
0
A
回答
1
如何使用CSS3漸變與border-radius
財產?我做了這個從零開始,你可以看看
div {
height: 200px;
width: 200px;
margin: 50px;
border: 3px solid #B6801F;
border-radius: 24px;
background: #f7d060;
background: -moz-linear-gradient(top, #f7d060 0%, #ed8328 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7d060), color-stop(100%,#ed8328));
background: -webkit-linear-gradient(top, #f7d060 0%,#ed8328 100%);
background: -o-linear-gradient(top, #f7d060 0%,#ed8328 100%);
background: -ms-linear-gradient(top, #f7d060 0%,#ed8328 100%);
background: linear-gradient(to bottom, #f7d060 0%,#ed8328 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7d060', endColorstr='#ed8328',GradientType=0);
box-shadow: 1px 2px 3px #313131;
position: relative;
}
div span {
position: absolute;
top: 10px;
width: 180px;
left: 10px;
height: 80px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0);
display: block;
border-radius: 18px;
}
+0
非常感謝我的線性漸變,我還沒有掌握 – 2013-05-03 05:44:19
+0
@JessMcKenzie歡迎您:),這會對您有所幫助http://www.colorzilla.com/gradient-editor/ – 2013-05-03 05:58:27
相關問題
- 1. 創建CSS3形狀?
- 2. css3形狀兼容性
- 3. CSS3轉換切斷形狀
- 4. 創建保持比例的android形狀
- 5. 在圓角創建CSS3形狀?
- 6. 是這種形狀可能與CSS3
- 7. CSS3形狀 - 有什麼可能?
- 8. css3的帆布比例尺故障
- 9. CSS3變換比例顯示抖動
- 10. CSS3菱形
- 11. ggplot2只有一個類別/只有形狀和沒有比例的圖例
- 12. CSS3菱形到三角形
- 13. 使用弧創建比薩形狀Android
- 14. 比較圖像(形狀sihlohette圖像)
- 15. 對齊CSS3僞:形狀之前與列表圖像
- 16. 用純粹的CSS3創建一個動態形狀
- 17. 在CSS3中創建形狀模型按鈕
- 18. 支持CSS3轉換的HTML形狀(最好使用DIV)
- 19. 如何計算呼吸娛樂的css3形狀動畫
- 20. 將形狀編號映射到圖例
- 21. 實例化形狀內的透明度
- 22. 具有相同形狀的案例類?
- 23. 如何防止CSS3比例上的像素化/模糊
- 24. CSS3變換比例 - 模糊桌面和完美移動
- 25. CSS3動畫縮放比例在Safari中無法正常工作
- 26. CSS3變換比例()確實使像素化一些元素
- 27. 手動比例wpf條形圖
- 28. 箱形陰影影響比例性能
- 29. ggplot2 - 條形圖總和的比例
- 30. 樹形內網和比例大小
哪一部分,你不知道該怎麼辦? – 2013-05-03 05:27:07