我正在设计一个文本区域,左上角有一个图标。为了防止文本进入图标区域,文本区域被填充:
padding: 35px 10px 10px 10px;
但是,当文本数量溢出文本区域时,文本会进入填充区域。
是否有一个优雅的解决方案可以在不使用太多额外元素的情况下防止文本流入此部分?
最佳答案
在图标元素上使用渐变背景:
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 33%,rgba(255,255,255,0.03) 98%,rgba(255,255,255,0) 100%);
这是demo
梯度是用 http://www.colorzilla.com/gradient-editor/ 生成的
所以所有的CSS行只是为了相同渐变的跨浏览器应用程序.. 您可以尝试一下它以获得您想要的确切效果..
你觉得怎么样? :)
关于html - 在滚动文本区域中保持恒定的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24161497/